@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda+SC:wght@400;500&family=Cinzel+Decorative:wght@400;700&family=Outfit:wght@300;400;500;600&display=swap');

:root{--ink:#100c0a;--paper:#f7f3ec;--stone:#e9e4dc;--gold:#c69631;--gold-text:#805719;--gold-light:#e4c07a;--red:#b01235;--muted:#6f665d;--line:#d7cec1}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:82px}
body{margin:0;background:var(--paper);color:var(--ink);font:300 16px/1.65 Outfit,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
a:focus-visible,summary:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--paper);padding:10px 16px}.skip:focus{top:12px}
.shell{width:min(100% - 32px,1440px);margin-inline:auto}
.eyebrow{font:500 10px/1.4 Outfit,sans-serif;letter-spacing:.22em;text-transform:uppercase}
.display{font:400 clamp(2.2rem,5vw,5.5rem)/1.13 'Cinzel Decorative',Georgia,serif;letter-spacing:-.04em;text-wrap:balance}
.poem{font:italic 400 clamp(2rem,4.6vw,4.8rem)/1.18 'Cinzel Decorative',Georgia,serif;letter-spacing:-.045em;text-wrap:balance}
.section-intro{text-align:center;padding:clamp(75px,10vw,145px) 20px clamp(45px,6vw,85px);max-width:900px;margin-inline:auto}
.section-intro .eyebrow{color:var(--gold-text);margin:0 0 20px}
.section-intro h2{margin:0 0 16px}
.section-intro p:last-child{max-width:58ch;margin:0 auto;color:var(--muted)}
.text-link{display:inline-block;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;font:500 10px/1.4 Outfit,sans-serif;letter-spacing:.17em;text-transform:uppercase;transition:color .2s,border-color .2s}
.text-link:hover{color:var(--red);border-color:var(--red)}

/* Una cabecera ligera conserva el protagonismo de la fotografía. */
.site-header{height:68px;position:fixed;top:0;left:0;right:0;z-index:30;background:rgba(247,243,236,.94);border-bottom:1px solid rgba(16,12,10,.08)}
.site-header .shell{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.header-left,.header-right{display:flex;align-items:center;gap:28px}
.header-right{justify-content:flex-end}
.menu-toggle{border:0;background:none;min-width:44px;min-height:44px;padding:0;display:flex;gap:10px;align-items:center;cursor:pointer;color:var(--ink);font:500 10px/1 Outfit,sans-serif;letter-spacing:.15em;text-transform:uppercase}
.menu-toggle .lines{width:19px;height:13px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;position:relative}
.menu-toggle .lines::after{content:"";position:absolute;left:0;right:0;top:5px;border-top:1px solid currentColor}
.site-header summary{list-style:none}.site-header summary::-webkit-details-marker{display:none}
.header-logo{width:185px;height:58px;object-fit:cover;object-position:center}
.header-brand{text-decoration:none;display:block}
/* El boton de reservar NO lleva carmesi. Decision suya del 2026-10-03: el
   carmesi es de Abba y es el ultimo resto del rosa de "Maria Gracia Nails";
   ponerlo en el lugar mas importante ata la reserva a ese color justo cuando
   la marca se esta volviendo sobria. Aqui manda el oro, y en linea: una
   capsula de filo de 1 px y el texto en oro-texto, que es el unico oro que
   pasa contraste sobre papel. El "destello" es un barrido que cruza UNA vez
   al pasar por encima o al tocar — no late solo, porque un brillo permanente
   es exactamente lo que se lee vulgar. */
.header-book{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 20px;border-radius:2px;border:1px solid var(--gold);background:none;color:var(--gold-text);font:500 11px/1 Outfit,sans-serif;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;transition:border-color .25s,background .25s,transform .18s}
.header-book::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(228,192,122,.6) 50%,transparent 62%);transform:translateX(-120%)}
.header-book:hover{border-color:var(--gold-light);background:rgba(198,150,49,.06)}
.header-book:hover::after,.header-book:active::after{animation:destello .9s ease-out}
.header-book:active{transform:scale(.985)}
@keyframes destello{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){.header-book::after{display:none}}

.menu-panel{position:absolute;top:68px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:30px max(16px,calc((100vw - 1440px)/2));box-shadow:0 18px 25px rgba(16,12,10,.08)}
.menu-panel nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.menu-panel a{font:400 clamp(1rem,1.5vw,1.45rem)/1.3 'Bodoni Moda SC',Georgia,serif;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--line)}
.menu-panel a:hover{color:var(--red)}

.hero{height:min(900px,100svh);min-height:650px;position:relative;background:#201712;color:var(--paper);overflow:hidden}
.hero-image{position:absolute;top:68px;bottom:0;right:0;width:54%;height:calc(100% - 68px);object-fit:cover;object-position:center top}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#201712 0%,rgba(32,23,18,.98) 25%,rgba(32,23,18,.48) 56%,transparent 88%)}
.hero-copy{position:absolute;z-index:2;bottom:clamp(32px,6vw,80px);left:max(20px,calc((100vw - 1440px)/2));right:20px;max-width:760px}
.hero-copy .eyebrow{margin:0 0 14px;color:var(--gold-light)}
.hero-copy h1{font:italic 400 clamp(2.65rem,5vw,5.6rem)/1.08 'Cinzel Decorative',Georgia,serif;letter-spacing:-.055em;margin:0 0 18px;text-wrap:balance}
.hero-copy p:not(.eyebrow){margin:0 0 24px;font-size:clamp(.93rem,1.4vw,1.1rem);max-width:47ch}
.hero .text-link{color:var(--paper)}

.category-grid,.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.category-card,.work-card{margin:0;min-width:0}
.category-card a,.work-card a{display:block;text-decoration:none}
.category-card .photo,.work-card .photo{overflow:hidden;background:var(--stone);aspect-ratio:4/5}
/* web-5, 2026-10-06. Textual suyo: "hace un acercamiento corto rapidamente,
   quisiera que fuera un acercamiento un poco mas fluido, suave". Valia
   `scale(1.025)` en `.55s ease`, y lo que lo hacia brusco eran tres cosas a la
   vez, no la duracion: (1) un recorrido de 2,5 % es tan corto que el ojo lo lee
   como un salto y no como un movimiento; (2) `ease` arranca de golpe y frena de
   golpe; (3) entrada y salida duraban lo mismo, asi que al sacar el raton la foto
   volvia con la misma prisa con la que se habia acercado.
   Solo la transicion: ni el marcado, ni los href, ni el orden, que muchas de
   estas fotos son enlaces.

   SEGUNDA VUELTA, la misma tarde: lo probo y seguia tosco. Textual: "yo pensaba
   como un suave acercamiento". Faltaban dos cosas que el primer arreglo no vio:

   1. NO ESTABA VIENDO ESTE ARCHIVO. editorial.css se sirve con
      `Cache-Control: public, max-age=604800` -SIETE DIAS- y la portada lo pedia
      con `?v=2026-10-06c`, una version que su navegador ya tenia guardada. Se
      cambio el CSS sin cambiar la version, asi que seguia leyendo el de antes.
      Ahora la version sube en las NUEVE paginas cada vez que se toca este archivo.
   2. LA FOTO NO ESTABA EN UNA CAPA. Sin `translateZ(0)` el navegador vuelve a
      remuestrear una foto de 760x950 en cada fotograma en vez de componerla en la
      tarjeta grafica, y eso en un PC se ve a tirones. En el movil no se nota
      porque EN EL MOVIL NO HAY HOVER: esa animacion alli no existe.

   Y de paso el recorrido sube al 6,5 % en 1,15 s. El 4 % en 0,85 s seguia siendo
   mas un cambio de tamano que un acercamiento. */
.category-card img,.work-card img{width:100%;height:100%;object-fit:cover;transform:scale(1) translateZ(0);backface-visibility:hidden;transition:transform .6s cubic-bezier(.33,0,.2,1)}
/* `will-change` SOLO mientras el raton esta encima, no siempre: una cuadricula
   entera de fotos promovidas a capa de forma permanente se come la memoria de
   video. En la tarjeta y no en el <a>, para que la capa este lista un instante
   antes de que empiece el movimiento. */
.category-card:hover img,.work-card:hover img{will-change:transform}
.category-card a:hover img,.work-card a:hover img,.category-card a:focus-visible img,.work-card a:focus-visible img{transform:scale(1.065) translateZ(0);transition:transform 1.15s cubic-bezier(.22,.61,.36,1)}
.category-card figcaption,.work-card figcaption{display:flex;justify-content:space-between;gap:12px;padding:11px 0 0;font:500 10px/1.45 Outfit,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.category-card figcaption span:last-child,.work-card figcaption span:last-child{color:var(--muted)}
.category-card a:focus-visible .photo,.work-card a:focus-visible .photo{outline:2px solid var(--red);outline-offset:3px}
.category-grid{padding-bottom:30px}
.editorial-block{margin-top:clamp(75px,11vw,170px);display:grid;grid-template-columns:1fr 1fr;background:var(--stone)}
.editorial-block .image{position:relative;height:clamp(600px,62vw,900px);overflow:hidden}
.editorial-block img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.editorial-copy{padding:clamp(45px,7vw,115px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.editorial-copy .eyebrow{color:var(--gold-text);margin:0 0 28px}
.editorial-copy h2{margin:0 0 25px;max-width:12ch}
.editorial-copy p{max-width:42ch;color:#4f4740;margin:0 0 28px}
.editorial-copy .text-link{margin-top:10px}
.statement{padding:clamp(100px,14vw,200px) 20px;text-align:center;max-width:1050px;margin:auto}
.statement p{margin:0 auto 24px;max-width:60ch;color:var(--muted)}
.statement h2{margin:0 auto 30px}
.portrait-banner{position:relative;height:clamp(600px,60vw,850px);overflow:hidden;color:var(--paper);background:#30251d}
.portrait-banner img{position:absolute;inset:0 auto 0 0;width:50%;height:100%;object-fit:cover;object-position:center top}
.portrait-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 38%,#30251d 52%)}
.portrait-banner .copy{position:absolute;z-index:2;left:56%;right:max(20px,calc((100vw - 1440px)/2));top:50%;transform:translateY(-50%);max-width:560px}
.portrait-banner .copy h2{margin:12px 0 18px}
.portrait-banner .copy p{max-width:45ch;margin:0 0 24px}
.portrait-banner .text-link{color:var(--paper)}
.reviews{border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;padding:90px 20px;margin-top:clamp(90px,12vw,160px)}
.reviews .score{display:block;font:400 clamp(4.5rem,9vw,9rem)/1 'Bodoni Moda SC',Georgia,serif;margin:15px 0}
.reviews p{margin:0 auto 20px;max-width:55ch;color:var(--muted)}
.reviews .stars{letter-spacing:.25em;color:var(--gold)}
.booking-band{background:var(--ink);color:var(--paper);text-align:center;padding:clamp(95px,14vw,180px) 20px}
.booking-band .eyebrow{color:var(--gold-light)}
.booking-band h2{margin:22px auto;max-width:900px}
.booking-band p{max-width:56ch;margin:0 auto 30px;color:#d1c9bd}
.booking-band .text-link{color:var(--paper)}
/* El par de acciones de la banda. Es el mismo lienzo que /cita-manicurista
   (noche con hueso encima), asi que se trae su patron tal cual: un solo
   carmesi para el destino primario, filo de oro para la via de la duda. */
.band-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:640px;margin:0 auto}
.band-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:16px 24px;border-radius:2px;text-decoration:none;font:500 12px/1 Outfit,sans-serif;letter-spacing:.1em;text-transform:uppercase;transition:background .18s,border-color .18s,transform .18s}
.band-btn svg{width:17px;height:17px;flex:none}
.band-btn:active{transform:scale(.985)}
/* Sobre noche, el destino primario es un bloque de hueso: maximo contraste,
   cero color. El oro sigue en linea, nunca de relleno. */
.band-btn-paper{background:var(--paper);color:var(--ink)}
.band-btn-paper:hover{background:#fff}
.band-btn-edge{border:1px solid var(--gold);color:var(--gold-light)}
.band-btn-edge:hover{background:rgba(198,150,49,.1);border-color:var(--gold-light)}
.booking-band .band-nota{max-width:40ch;margin:34px auto 0;font:300 14px/1.65 Outfit,sans-serif;color:#cdc5b9}
.booking-band .band-nota b{color:var(--gold-light);font-weight:500}
.faq-section{padding:100px 20px;max-width:820px;margin:auto}
.faq-section h2{text-align:center;margin:0 0 40px}
.faq-section details{border-bottom:1px solid var(--line)}
.faq-section summary{cursor:pointer;padding:23px 2px;display:flex;justify-content:space-between;gap:18px;font:500 15px/1.4 Outfit,sans-serif}
.faq-section summary::after{content:'+';font-size:22px;font-weight:300;color:var(--gold-text)}
.faq-section details[open] summary::after{content:'−'}
.faq-section details p{color:var(--muted);margin:0 0 24px;max-width:68ch}
/* La banda de su trayectoria, el ultimo escalon antes del pie (2026-10-06).
   Se separa por el color, no por una foto: piedra entre dos tramos de papel.
   Es deliberadamente mas baja que .statement -una tercera seccion centrada a
   200 px de alto leeria como relleno-, y su enlace no compite con "Reservar". */
.perfil-band{background:var(--stone);text-align:center;padding:clamp(70px,9vw,115px) 20px}
.perfil-band .eyebrow{color:var(--gold-text);margin:0 0 18px}
.perfil-band h2{margin:0 auto 20px;max-width:16ch}
.perfil-band p{margin:0 auto 28px;max-width:48ch;color:var(--muted)}

.site-footer{border-top:1px solid var(--line);padding:60px 0 35px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.footer-logo{width:190px;height:64px;object-fit:cover;object-position:center}
.footer-grid h2{font:500 10px/1 Outfit,sans-serif;letter-spacing:.18em;text-transform:uppercase;margin:0 0 20px}
.footer-grid a{display:block;font-size:13px;text-decoration:none;margin:0 0 10px}
.footer-grid a:hover{text-decoration:underline}
.footer-grid p{font-size:13px;max-width:38ch;color:var(--muted)}
.fineprint{border-top:1px solid var(--line);margin-top:55px;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:15px;color:var(--muted);font-size:11px}
.agency-credit{display:inline-flex;flex-direction:column;align-items:flex-start;align-self:flex-start;gap:6px;max-width:360px;margin-right:76px;padding:12px 16px;background:var(--ink);border:1px solid var(--gold);color:var(--paper);font:500 11px/1.4 Outfit,sans-serif;letter-spacing:.02em;white-space:normal;box-sizing:border-box}
.agency-credit-title{display:flex;flex-wrap:wrap;align-items:center;column-gap:5px;max-width:100%}
.agency-credit-detail{display:block;font-size:11px;line-height:1.5;letter-spacing:0;color:var(--paper)}
.agency-credit a{color:var(--gold-light);font-size:14px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.agency-credit a:hover{color:#fff}

/* Servicio editorial */
.breadcrumb{position:absolute;z-index:2;top:88px;left:max(20px,calc((100vw - 1440px)/2));display:flex;gap:10px;align-items:center;color:var(--muted);font:500 10px/1.5 Outfit,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.breadcrumb a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.breadcrumb a:hover{color:var(--red)}
.service-hero{padding-top:68px;display:grid;grid-template-columns:1fr 1fr}
.service-hero .service-copy{padding:clamp(55px,8vw,150px) clamp(25px,6vw,110px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.service-hero .eyebrow{color:var(--gold-text)}
.service-hero h1{margin:20px 0 22px}
.service-hero p:not(.eyebrow){max-width:48ch;color:var(--muted);margin:0 0 27px}
.service-hero .image{position:relative;height:clamp(600px,62vw,880px);overflow:hidden;background:var(--stone)}
.service-hero .image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.service-hero .image img[src*="maria-"]{object-position:center 18%}
.service-text{padding:clamp(90px,12vw,155px) 20px;max-width:820px;margin:auto;text-align:center}
.service-text h2{margin:0 0 25px}
.service-text p{max-width:62ch;margin:0 auto 24px;color:var(--muted)}
.service-facts{margin:32px auto;max-width:610px;text-align:left;border-top:1px solid var(--line)}
.service-facts div{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid var(--line)}
.service-facts dt{font:500 14px/1.5 Outfit,sans-serif}
.service-facts dd{margin:0;color:var(--muted);font:400 13px/1.5 Outfit,sans-serif;text-align:right;white-space:nowrap}
.service-text .service-facts-note{font-size:12px;max-width:58ch}
.service-work{padding-bottom:clamp(90px,12vw,160px)}
.service-work .section-intro{padding-top:0}
.related-services{text-align:center;padding:clamp(85px,11vw,150px) 20px;max-width:850px;margin:auto}
.related-services .eyebrow{color:var(--gold-text)}
.related-services h2{margin:15px auto 35px}
.related-services>div{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 32px}
.related-services a{font:500 12px/1.5 Outfit,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:6px}
.related-services a:hover{color:var(--red);border-color:var(--red)}
.service-index{border-top:1px solid var(--line);margin-top:40px;padding:55px 0 20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.service-index a{text-decoration:none;border-bottom:1px solid var(--line);padding:12px 0;font:400 clamp(1rem,1.55vw,1.3rem)/1.3 'Bodoni Moda SC',Georgia,serif}
.service-index a:hover{color:var(--red);border-color:var(--red)}


/* Promociones: los paquetes que ya existen en la agenda de Fresha (2026-10-06).
   Viven entre los trabajos y las resenas, asi que llevan el respiro normal de seccion.
   Fichas sobre papel con filo de 1 px, el precio en Bodoni y el valor anterior
   tachado en gris. El ahorro va en oro-texto, que es el unico oro que pasa
   contraste sobre papel; el carmesi se reserva para el enlace, que es la accion. */
.promos{padding-bottom:clamp(40px,6vw,80px)}
.promo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.promo-card{margin:0;padding:clamp(26px,3vw,40px);background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start}
.promo-card h3{margin:0 0 10px;font:400 clamp(1.15rem,1.8vw,1.5rem)/1.3 'Bodoni Moda SC',Georgia,serif;text-wrap:balance}
.promo-meta{margin:0 0 16px;font:500 10px/1.4 Outfit,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text)}
.promo-desc{margin:0 0 24px;color:var(--muted);font-size:15px;max-width:46ch}
.promo-precio{margin:0 0 24px;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px}
.promo-precio .ahora{font:400 clamp(1.5rem,2.4vw,2rem)/1 'Bodoni Moda SC',Georgia,serif}
.promo-precio s{color:var(--muted);font-size:14px}
.promo-precio em{font:500 10px/1.4 Outfit,sans-serif;letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--gold-text)}
.promo-card .text-link{margin-top:auto}
.promo-nota{margin:26px auto 0;color:var(--muted);font-size:12px;max-width:58ch;text-align:center}
@media(max-width:760px){.promo-grid{grid-template-columns:1fr;gap:16px}}

/* La burbuja de WhatsApp, siempre a mano. No es verde: el verde de WhatsApp
   no esta en la paleta y al lado del oro se lee barato. Disco en marron mostaza (#6B4612,
   el oro oscurecido), filo de oro y simbolo en oro claro — la marca se reconoce por su silueta, no por su color.
   No aparece sobre la portada: entra cuando la persona ya esta recorriendo la
   pagina, para que la primera impresion quede limpia. El halo solo sale al
   pasar por encima o al tocar; no late solo. */
/* Los dos botones flotantes: WhatsApp y llamar. `web-39`, 2026-10-07.
   Lo comun esta en `.flotante` y lo unico que los separa es el fondo, a proposito: misma
   medida, mismo filo dorado, mismo icono claro y la misma entrada, para que se lean como una
   pareja y no como dos cosas pegadas. El de llamar va ENCIMA, que es como lo pidio.
   EL COLOR. El de WhatsApp es marron (#6B4612) con filo dorado. El de llamar lleva el vino de
   la marca (--red, #b01235), que es el otro color que ya existe en esta paleta: contrasta de
   verdad contra el marron y no mete un color nuevo. Nada de verde de WhatsApp ni azul de
   telefono: eso seria marca ajena en la esquina de la suya.
   EL ALTO NO SE FIJA A MANO. El de llamar se coloca con `bottom` calculado desde el de abajo
   (16 + 56 + 12), asi que si algun dia cambia la medida del boton basta tocar --flotante-alto. */
:root{--flotante-alto:56px;--flotante-hueco:12px}
.flotante{position:fixed;right:16px;z-index:28;width:var(--flotante-alto);height:var(--flotante-alto);border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(198,150,49,.7);color:var(--gold-light);box-shadow:0 6px 22px rgba(16,12,10,.28);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease,visibility .45s,box-shadow .25s,border-color .25s,background .25s}
.flotante.a-la-vista{opacity:1;visibility:visible;transform:none}
.flotante svg{width:28px;height:28px;flex:none}
.flotante:hover{border-color:var(--gold-light);color:var(--gold-light);box-shadow:0 6px 22px rgba(16,12,10,.3),0 0 0 7px rgba(198,150,49,.09)}
.flotante:active{transform:scale(.95)}
.wa-flotante{bottom:16px;background:#6B4612}
.tel-flotante{bottom:calc(16px + var(--flotante-alto) + var(--flotante-hueco));background:var(--red)}
.tel-flotante svg{width:26px;height:26px}   /* el auricular pinta mas lleno que el globo: un punto menos */
.tel-flotante:hover{background:#c41640}
@media(prefers-reduced-motion:reduce){.flotante{transition:opacity .2s}}

@media(max-width:760px){
 .site-header{height:62px}.site-header .shell{grid-template-columns:1fr auto 1fr}.header-left,.header-right{gap:0}.header-logo{width:52px;height:52px;object-fit:contain}.menu-toggle .menu-word{display:none}.menu-panel{top:62px;padding:20px}.menu-panel nav{grid-template-columns:1fr 1fr;gap:6px 20px}
 .hero{height:86svh;min-height:640px}.hero-image{top:62px;left:0;right:0;width:100%;height:calc(100% - 62px);object-position:center top}.hero::after{inset:40% 0 0;background:linear-gradient(transparent,rgba(16,12,10,.12) 20%,rgba(16,12,10,.75) 100%)}.hero-copy{bottom:35px}.hero-copy h1{font-size:clamp(2.35rem,9vw,3.5rem)}
 .category-grid,.work-grid{gap:13px}.category-card figcaption,.work-card figcaption{font-size:9px;letter-spacing:.08em;display:block}.category-card figcaption span:last-child,.work-card figcaption span:last-child{display:block;margin-top:3px}
 .editorial-block{grid-template-columns:1fr}.editorial-block .image{height:clamp(500px,115vw,760px)}.editorial-copy{padding:65px 25px 80px}.editorial-copy h2{max-width:none}
 .portrait-banner{height:115vw;min-height:550px}.portrait-banner img{width:100%;object-position:center top}.portrait-banner::after{inset:45% 0 0;background:linear-gradient(transparent,rgba(16,12,10,.68))}.portrait-banner .copy{left:20px;right:20px;top:auto;bottom:clamp(35px,7vw,100px);transform:none}.statement{padding:100px 20px}
 .band-actions{flex-direction:column}.band-btn{width:100%}
 .footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.fineprint{flex-direction:column;align-items:flex-start;gap:9px}
 .breadcrumb{top:77px}.service-hero{grid-template-columns:1fr}.service-hero .service-copy{padding:110px 20px 45px}.service-hero .image{height:auto;aspect-ratio:3/4}
 .service-index{grid-template-columns:1fr 1fr;gap:6px 18px;padding:35px 0 10px}.service-facts div{display:block}.service-facts dd{text-align:left;white-space:normal;margin-top:4px}
}
@media(min-width:641px) and (max-width:760px){
 .editorial-block{grid-template-columns:1fr 1fr}.editorial-block .image{height:clamp(560px,82vw,650px)}.editorial-copy{padding:35px}
 .service-hero{grid-template-columns:1fr 1fr}.service-hero .service-copy{padding:105px 25px 45px}.service-hero .image{height:clamp(560px,82vw,650px);aspect-ratio:auto}
}
@media(max-width:430px){.category-grid,.work-grid{gap:10px}.category-card .photo,.work-card .photo{aspect-ratio:4/5}.hero-copy p:not(.eyebrow){font-size:.93rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.category-card img,.work-card img{transition:none}.category-card a:hover img,.work-card a:hover img,.category-card a:focus-visible img,.work-card a:focus-visible img{transform:none}}

/* Preferencias de medición y página de privacidad */
.analytics-choice{position:fixed;z-index:1000;left:16px;right:16px;bottom:16px;max-width:850px;margin:auto;padding:20px 24px;background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 12px 44px rgba(0,0,0,.22);display:flex;align-items:center;gap:24px}
.analytics-choice p{margin:0;flex:1;font-size:14px;line-height:1.55}
.analytics-choice>div{display:flex;gap:8px;flex-shrink:0}
.analytics-choice button,.privacy-button{font:500 12px/1.4 Outfit,sans-serif;letter-spacing:.04em;cursor:pointer;padding:10px 15px;border:1px solid var(--ink);background:transparent;color:var(--ink)}
.analytics-choice button[data-consent="yes"],.privacy-button{background:var(--ink);color:var(--paper)}
.analytics-choice button:focus-visible,.privacy-button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.privacy-page{max-width:850px;margin:0 auto;padding:clamp(110px,12vw,180px) 20px 90px}
.privacy-page h1{margin:15px 0 35px}.privacy-page h2{font:400 clamp(1.5rem,3vw,2.1rem)/1.2 'Bodoni Moda SC',Georgia,serif;margin:45px 0 15px}
.privacy-page p{font-size:16px;line-height:1.7;color:var(--muted)}
.privacy-page a,.analytics-choice a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.analytics-choice{display:block;padding:16px}.analytics-choice>div{margin-top:12px}.analytics-choice button{flex:1}.privacy-page{padding-top:110px}}

/* Lectura y controles táctiles en móvil; no cambia contenido ni estructura SEO. */
@media(max-width:760px){
 .eyebrow{font-size:12px;letter-spacing:.15em}
 .text-link{display:inline-flex;align-items:center;min-height:44px;padding:9px 0 7px;font-size:12px;letter-spacing:.12em}
 .category-card figcaption,.work-card figcaption{font-size:12px;line-height:1.4;letter-spacing:.04em}
 .breadcrumb{top:69px;font-size:11px}.breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
 .related-services a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;font-size:13px}
 .service-text .service-facts-note{font-size:13px}
 .footer-grid h2{font-size:12px}.footer-grid a{display:flex;align-items:center;min-height:44px;margin:0;font-size:14px}.footer-grid p{font-size:14px}
 .fineprint{font-size:12px}
 .analytics-choice button,.privacy-button{min-height:44px;font-size:13px}
}
@media(min-width:761px) and (max-width:900px){
 .eyebrow{font-size:12px;letter-spacing:.15em}
 .text-link{display:inline-flex;align-items:center;min-height:44px;padding:9px 0 7px;font-size:12px;letter-spacing:.12em}
 .category-card figcaption,.work-card figcaption{font-size:12px;letter-spacing:.06em}
 .footer-grid a{display:flex;align-items:center;min-height:44px;margin:0;font-size:14px}
 .related-services a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;font-size:13px}
 .analytics-choice button,.privacy-button{min-height:44px;font-size:13px}
}
@media(max-width:900px){
 .breadcrumb a,.fineprint span:not(.agency-credit) a{display:inline-flex;align-items:center;min-height:44px}
 .agency-credit{min-height:44px;max-width:calc(100% - 76px);padding:10px 14px}.agency-credit a{display:inline-flex;align-items:center;min-height:44px}
 .privacy-page p a{display:inline-block;padding:10px 0}
}