/* Art direction: a printed creative journal, brought into motion. */
:root{--ease:cubic-bezier(.22,1,.36,1);--space:clamp(64px,8vw,128px)}
html{scrollbar-color:var(--coral) var(--paper)}
::selection{background:var(--coral);color:var(--ink)}
:focus-visible{outline:3px solid var(--coral);outline-offset:5px}
.coral :focus-visible{outline-color:var(--ink)}
.container{width:min(1320px,calc(100% - 80px))}
.section{padding-block:var(--space)}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.eyebrow{font-size:.875rem;letter-spacing:.12em}
.section-head{gap:48px;margin-bottom:52px;align-items:flex-end}
.section-head h2{font-size:clamp(2.6rem,4.4vw,4.6rem);line-height:1.04}
.section-head>p{font-size:1rem;line-height:1.8}
.button{min-height:50px;padding:15px 25px;box-shadow:4px 5px 0 var(--ink);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s}
.button:hover{transform:translate(2px,2px);box-shadow:2px 3px 0 var(--ink)}
.button:active{transform:translate(4px,5px);box-shadow:0 0 0 var(--ink)}
.button span{transition:translate .35s var(--ease)}
.button:hover span{translate:4px -3px}
.header{border-bottom:1px solid #17252620}
/* La barra encoge de 94 a 76 al bajar, pero SIN transicion, y es a proposito.
   La cabecera es position:sticky, o sea que ocupa sitio en el flujo: animar su
   altura durante 300ms remaquetaba la pagina en cada fotograma. El anclaje de
   scroll del navegador intentaba compensar ese movimiento empujando el scroll,
   y esa pelea es el temblor. Se veia en que pedir scrollTo(0,0) acababa en 83
   con la barra congelada a 86px. Asi encoge de golpe: un reflujo, no dieciocho.
   Si algun dia se quiere la animacion de vuelta, la cabecera tiene que salir
   del flujo (position:fixed con un hueco fijo debajo), no basta con el CSS. */
.navigation{height:94px}
.header.scrolled .navigation{height:76px}
.nav-links,.services-menu>summary{font-size:.875rem}
.brand small{font-size:.625rem}
.hero-scene{padding-top:clamp(40px,4vw,70px);padding-bottom:95px}
.hero-scene .hero-grid{min-height:clamp(480px,36vw,610px)}
/* El alto del hero manda sobre el tamano del dibujo: cover lo escala hasta
   cubrirlo. Se probo a subirlo a 42vw/735 para que la imagen llegara a la
   izquierda tambien en 1920, y se descarto con numeros delante: al crecer el
   hero, el texto queda mas abajo y el titular coral cae sobre la maleza
   oscura del dibujo, con 2,66:1 de contraste. El minimo de texto grande es
   3, y no habia velo que lo arreglara. Con este alto el titular se queda
   arriba, sobre cielo. */
.hero-scene .hero-copy{width:53%;max-width:710px}
.hero-scene h1{font-size:clamp(3rem,4.8vw,5.3rem);letter-spacing:-.055em;line-height:1.02;margin:22px 0 26px}
.hero-scene .lead{max-width:500px;line-height:1.75}
.hero-scene .hero-actions{gap:20px;margin-top:32px}
.hero-scene .text-link{font-size:.875rem;flex-basis:100%;width:fit-content}
.hero-scene .hero-services>summary{min-height:54px;align-items:center;font-size:.875rem}
.hero-scene .scroll-hint{font-size:.75rem;left:max(40px,calc((100vw - 1320px)/2))}
/* El velo. La izquierda ya no se apaga del todo -eso dejaba el dibujo a
   medias y era el corte que se veia-: se queda en un 14 % hasta el 44 % del
   ancho y de ahi sube a entero.
   El 14 no es un gusto, es el techo. Detras del texto hay maleza oscura, y
   cuanto mas velo, menos contraste. Probado a 1150, 1250, 1366, 1440, 1600
   y 1699 px de ventana midiendo el fondo real bajo cada linea de texto: el
   peor caso es 1366, donde con un 30 % el antetitulo se quedaba en 3,8:1 y
   el titular coral en 2,66:1. Con 14 % ese mismo caso da 4,8:1 y 3,4:1, por
   encima de los minimos (4,5 para texto pequeno, 3 para texto grande).
   Y no vale fiarse de una sola medida: el dibujo no es uniforme, asi que
   cada ancho de ventana pone una parte distinta debajo del texto. */
.hero-backdrop img{transform:none;mask-image:linear-gradient(to right,rgba(0,0,0,.14) 0,rgba(0,0,0,.14) 44%,#000 60%);-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.14) 0,rgba(0,0,0,.14) 44%,#000 60%)}
/* #bc3928 sobre papel limpio daba 4,75:1; con el dibujo detras se quedaba
   en 3,99 y el antetitulo es texto pequeno, asi que necesita 4,5. Este da
   4,83. */
.hero-scene .eyebrow{color:#a8301f}
/* Aquí había una excepción para pantallas de 1700 px en adelante que quitaba
   el velo y devolvía el reparto antiguo. Se fue al bajar el velo del 30 al
   14 %: con 14 el contraste ya aguanta en todos los anchos medidos -1150,
   1250, 1366, 1440, 1600, 1920 y 2560-, así que sobraba un caso especial, y
   un caso especial es siempre lo primero que se queda sin mantener. */
}
.intro .hero-backdrop{animation:scene-arrive 1.4s var(--ease) both}
@keyframes scene-arrive{from{opacity:.2;filter:saturate(.4)}to{opacity:1;filter:saturate(1)}}
.ticker{padding-block:18px;border-block:2px solid var(--ink);letter-spacing:.13em}
.service-dropdown{top:calc(100% + 1px);width:min(850px,calc(100vw - 80px));padding:28px;box-shadow:8px 9px 0 var(--ink);border-radius:0}
.dropdown-intro{margin-bottom:20px;padding-bottom:20px}
.dropdown-intro p{font-size:1.65rem}
.dropdown-intro a{font-size:.875rem}
.dropdown-grid{gap:8px}
.dropdown-grid strong{font-size:.95rem}
.dropdown-grid small{font-size:.8125rem;line-height:1.5}
.dropdown-grid a{min-height:79px;border:1px solid transparent;transition:background .2s,border-color .2s}
.dropdown-grid a:hover,.dropdown-grid a:focus-visible{background:#e94f3b12;border-color:#17252630}
.menu-art{display:none}
@media(min-width:1101px){
 .nav-links .service-dropdown.has-preview{display:grid;grid-template-columns:1fr 230px;gap:0 24px}
 .nav-links .has-preview .dropdown-intro{grid-column:1/-1}
 .nav-links .has-preview .dropdown-grid{grid-template-columns:1fr 1fr}
 .nav-links .menu-art{display:flex;flex-direction:column;justify-content:flex-end;gap:14px;margin:0;border-left:1px solid #17252635;padding-left:24px}
 .menu-art img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--ink)}
 .menu-art figcaption{font-family:Fraunces,Georgia,serif;font-size:1.5rem;font-weight:900;line-height:1.1}
}
.services-grid{gap:30px;counter-reset:service}
.service{padding:24px 24px 28px;border-radius:0;box-shadow:6px 7px 0 var(--coral);overflow:visible;counter-increment:service}
.service:before{content:counter(service,decimal-leading-zero);position:absolute;top:36px;left:36px;z-index:1;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--paper);border:1px solid var(--ink);font-size:.8rem;font-weight:800}
.service-card-image{margin:0 0 24px;border-radius:0;aspect-ratio:16/10;transition:filter .5s var(--ease)}
.service h3{font-size:1.35rem;letter-spacing:-.035em;margin:0 0 12px;line-height:1.2}
.service p{font-size:1rem;line-height:1.65;max-width:none;margin-bottom:22px}
.service .card-arrow{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--ink);border-radius:50%;color:var(--ink);font-size:1.4rem;transition:background .3s,rotate .3s}
.service:hover .card-arrow{background:var(--coral);transform:none;rotate:45deg}
.service:hover{translate:0 -5px;box-shadow:6px 12px 0 var(--coral)}
.portfolio .section-head{align-items:flex-end}
.filters{gap:8px;max-width:490px}
.filter{padding:10px 17px;min-height:44px;font-size:.875rem}
/* Tres por fila y no dos. Con dos, cada ficha medía 600 px de ancho: muy
   vistoso con tres proyectos y ridículo con quince, que es a donde va esto.
   A tres caben cinco filas sin que la página se haga interminable y la
   portada de cada proyecto sigue siendo lo bastante grande para leerse. */
.projects-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 22px;align-items:start}
.project{border:0;border-radius:0;background:transparent;box-shadow:none!important;overflow:visible;position:relative}
.project:hover{translate:0 0}
.project>.project-art{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--ink);border:1px solid var(--ink);transform:none}
.project-media{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .8s var(--ease)}
.project:hover .project-media,.project:focus-visible .project-media{transform:scale(1.045);filter:saturate(1.08)}
.project-info{border:0;padding:16px 0 0}
.project-info .eyebrow{font-size:.75rem;letter-spacing:.14em;margin-bottom:8px}
.project-info strong{font-family:Fraunces,Georgia,serif;font-weight:900;font-size:clamp(1.3rem,1.75vw,1.65rem);line-height:1.08;letter-spacing:-.035em;padding-right:46px}
.project-info .meta{font-size:.8125rem;margin-top:9px}
.project-info .card-arrow{display:grid;place-items:center;right:0;top:32px;width:38px;height:38px;border:1px solid var(--ink);border-radius:50%;font-size:1.2rem;color:var(--ink);transition:background .3s,rotate .3s}
.project:hover .card-arrow{background:var(--coral);transform:none;rotate:45deg}
.project-open-label{position:absolute;right:20px;bottom:20px;display:flex;align-items:center;gap:16px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:50px;padding:12px 17px;font-size:.875rem;font-weight:700;opacity:0;transform:translateY(12px);transition:transform .4s var(--ease),opacity .4s}
.project:hover .project-open-label,.project:focus-visible .project-open-label{opacity:1;transform:none}
/* El escalonado de las fichas pares se va con las dos columnas: con tres
   por fila dejaba huecos en zigzag y la rejilla se leía como un accidente.
   Quince proyectos piden orden, no gracia. */
@media(min-width:1000px){.projects-grid{padding-bottom:15px}}
.about-grid{grid-template-columns:1.05fr 1.15fr;gap:50px;padding-block:65px}
.about-copy{padding:0}
.about-copy h2{font-size:clamp(2.7rem,4vw,4rem);line-height:1.04}
.about-copy p:not(.eyebrow){font-size:1rem;line-height:1.75}
.studio-feature-image{box-shadow:12px 12px 0 var(--ink);transform:rotate(-3deg)}
.values{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:none;width:100%;padding:35px 0 0;border-top:1px solid #17252660}
.values>div{display:flex;align-items:center;gap:22px}
.values strong{font-size:3rem}.values span{font-size:.95rem;max-width:145px}
.steps{gap:35px;margin-top:55px}
.step h3{font-size:1.2rem;line-height:1.3}.step p{font-size:1rem;line-height:1.75}
.step-number{width:48px;height:48px;transition:background .4s,transform .4s}
.steps:before{top:24px}.step.active .step-number{transform:rotate(-8deg)}
.testimonials{padding:75px 0}
.quote{padding:40px;border-radius:0;box-shadow:8px 9px 0 var(--ink);transform:rotate(1deg)}
.quote blockquote{font-family:Fraunces,Georgia,serif;font-weight:900;font-size:clamp(1.6rem,2.2vw,2.1rem);line-height:1.25;letter-spacing:-.025em}
.quote .eyebrow{font-size:.8125rem;margin-bottom:20px}
.contact h2{font-size:clamp(2.7rem,4.1vw,4.2rem)}
.contact-grid{grid-template-columns:1.2fr 1fr;gap:45px}.contact-grid>.contact-links{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;border-left:0;border-top:1px solid #17252660;padding:30px 0 0;gap:24px 40px}
.contact p{font-size:1rem;line-height:1.75}
footer{overflow:hidden;padding-top:55px}
.footer-signature{display:block;font-size:clamp(2.2rem,11.2vw,11rem);font-family:Fraunces,Georgia,serif;font-weight:900;line-height:1.1;letter-spacing:-.07em;color:var(--paper);white-space:nowrap;margin:0 0 45px;border-bottom:1px solid #f5ecd530;padding-bottom:35px}
.footer-grid nav,.legal-footer{font-size:.875rem}
.legal-footer{gap:18px 28px}
.subpage-hero{padding-top:40px;padding-bottom:70px}
.subpage-hero h1{font-size:clamp(3rem,6vw,6rem);letter-spacing:-.055em;line-height:1.02}
.breadcrumbs{font-size:.875rem;margin-bottom:42px}
.page-intro-grid{grid-template-columns:1.1fr 1fr;gap:60px}
.visual-service{box-shadow:12px 12px 0 var(--coral);transform:rotate(2deg)}
.visual-service img{transition:filter .6s}
.deliverables li{padding-block:24px}
.faq-list summary{padding-block:6px;min-height:44px}
.faq-list details[open] p{animation:fade-in .35s var(--ease)}
.page-cta{padding-block:65px}
.brief-form{border-radius:0;padding:38px}
.brief-form input,.brief-form select,.brief-form textarea{border-radius:0;padding:14px;transition:background .2s}
.brief-form input:focus,.brief-form textarea:focus{background:#fffdf6}
#project-dialog{width:min(1220px,calc(100% - 64px));max-height:90dvh;border-radius:0;overflow:auto;box-shadow:10px 12px 0 var(--coral)}
#project-dialog[open]{display:grid;grid-template-columns:1.35fr 1fr;align-items:stretch}
#project-dialog .dialog-art{aspect-ratio:auto;min-height:520px;background-size:cover;background-position:center;border-right:2px solid var(--ink);transition:opacity .2s}
#project-dialog .dialog-content{padding:65px 36px 36px;display:flex;flex-direction:column;justify-content:center}
#project-dialog h2{font-size:clamp(2rem,3.6vw,3.6rem);line-height:1.05}
#project-dialog #project-description{font-size:1rem;line-height:1.75;margin-top:8px}
#project-dialog .dialog-close{right:15px;top:15px;width:44px;height:44px}
.project-controls{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #17252650;padding-top:22px;margin:15px 0 28px;gap:16px}
.project-controls button{border:1px solid var(--ink);background:transparent;border-radius:50%;width:44px;height:44px;font-size:1.4rem}
.project-controls button:hover{background:var(--coral)}
.project-controls button:disabled{opacity:.35;cursor:default}
.project-position{font-size:.875rem;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.cookie-dialog{border-radius:0;padding:38px;box-shadow:10px 11px 0 var(--coral)}
.cookie-dialog h2{font-size:2.7rem;line-height:1.05}
.cookie-dialog[open]{animation:dialog-arrive .35s var(--ease)}
@keyframes dialog-arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
.motion-on .reveal{transition:opacity .85s var(--ease),transform .85s var(--ease)}
.motion-on .reveal.waiting{transform:translateY(32px);opacity:0}
.motion-paused .hero-backdrop img{transform:none!important}
.motion-paused .project-media{transform:none!important}
@media(max-width:1100px){
 .container{width:calc(100% - 56px)}
 .hero-scene{padding:36px 0 calc(min(92.5vw,550px) + 32px)}
 .hero-scene .hero-copy{width:100%;max-width:690px}
 .hero-scene .hero-grid{min-height:0}
 .hero-scene h1{font-size:clamp(2.7rem,7.4vw,4.8rem)}
 .hero-backdrop img{transform:none}
 .services-grid{gap:22px}.service{padding:19px 19px 24px}.service:before{top:28px;left:28px}
 .service h3{font-size:1.2rem}.service p{font-size:.95rem}
 .page-intro-grid{gap:35px}
 .nav-links{gap:14px}
 .nav-links .service-dropdown{width:min(780px,calc(100vw - 56px))}
 .about-grid{gap:30px}.values>div{gap:15px}
 #project-dialog .dialog-art{min-height:450px}
}
@media(max-width:800px){
 html{scroll-padding-top:90px}
 .container{width:calc(100% - 40px)}
 .navigation,.header.scrolled .navigation{height:76px}
 .section-head{gap:24px;margin-bottom:35px}
 .section-head h2{font-size:clamp(2.5rem,7vw,3.6rem)}
 .section-head>p{padding-left:20px}
 .nav-links.open{position:fixed;top:76px;left:0;right:0;max-height:calc(100dvh - 76px);padding:25px 25px 35px;border-bottom:2px solid var(--ink);overscroll-behavior:contain;animation:drop-in .25s var(--ease)}
 .nav-links>a{font-family:Fraunces,Georgia,serif;font-size:1.8rem;font-weight:900}
 .nav-links .services-menu>summary{font-family:Fraunces,Georgia,serif;font-size:1.8rem;font-weight:900}
 .nav-links .service-dropdown{width:100%;padding:16px;margin:12px 0;border:1px solid var(--ink)}
 .dropdown-intro{gap:12px;margin-bottom:12px;padding-bottom:14px}
 .dropdown-grid a{min-height:65px}.dropdown-grid small{font-size:.8125rem}
 .hero-scene .scroll-hint{left:20px}
 .hero-scene .hero-services .service-dropdown{left:0;width:min(620px,calc(100vw - 48px));padding:20px}
 .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}
 .project-info strong{font-size:1.4rem;padding-right:40px}
 .project-info .card-arrow{width:36px;height:36px;font-size:1.2rem;top:48px}
 .project-info .meta{font-size:.8125rem}
 .project-open-label{display:none}
 .about-grid{grid-template-columns:1fr;padding-block:50px;gap:35px}
 .studio-feature-image{width:calc(100% - 12px);max-width:600px;margin:0 auto}
 .values{gap:18px}.values>div{display:block}.values strong{font-size:2.5rem}.values span{font-size:.875rem}
 .testimonial-grid{gap:30px}.testimonials{padding-block:55px}.quote{padding:30px}
 .contact-grid{grid-template-columns:1fr}.contact-grid>.contact-links{flex-direction:column;gap:20px}
 .page-intro-grid{grid-template-columns:1fr;gap:35px}
 .visual-service{width:calc(100% - 16px);max-width:570px}
 .footer-signature{font-size:10.8vw;margin-bottom:32px;padding-bottom:28px}
 #project-dialog{width:calc(100% - 28px);max-height:90dvh;box-shadow:5px 6px 0 var(--coral)}
 #project-dialog[open]{display:block}
 #project-dialog .dialog-art{min-height:0;aspect-ratio:4/3;border-right:0;border-bottom:2px solid var(--ink)}
 #project-dialog .dialog-content{padding:28px}
 #project-dialog h2{font-size:2.3rem}
 .project-controls{margin-block:8px 24px}
}
@media(max-width:560px){
 .container{width:calc(100% - 36px)}
 .hero-scene h1{font-size:clamp(2rem,9.1vw,3.15rem)}
 .hero-scene .eyebrow{font-size:.75rem;letter-spacing:.055em}
 .hero-scene .hero-actions{align-items:flex-start;flex-direction:column;gap:20px}
 .hero-scene .hero-services{width:100%}
 .hero-scene .lead{font-size:1rem}
 .services-grid,.projects-grid{grid-template-columns:1fr}
 .service{padding:22px 22px 26px}.service h3{font-size:1.4rem}.service p{font-size:1rem}
 .service-card-image{aspect-ratio:16/10}
 .project-info strong{font-size:2.05rem}.project-info .card-arrow{display:grid;width:42px;height:42px}
 .project-info .eyebrow{font-size:.8125rem}
 .project-info{padding-top:20px}
 .projects-grid{gap:38px}
 .filter{padding:9px 13px;font-size:.8125rem}
 .step h3{font-size:1.125rem}.step p{font-size:.9375rem}
 .quote{padding:28px}.quote blockquote{font-size:1.65rem}
 .footer-signature{letter-spacing:-.07em}
 .brief-form{padding:24px}
 .subpage-hero h1{font-size:clamp(2.6rem,10vw,3.6rem);overflow-wrap:anywhere}
 .cookie-dialog{padding:25px}.cookie-dialog h2{font-size:2.2rem}
 .cookie-actions{gap:12px}
 .whatsapp-link{bottom:max(12px,env(safe-area-inset-bottom));left:12px}
 .motion-toggle{bottom:max(12px,env(safe-area-inset-bottom));right:12px;font-size:.6875rem;padding:10px}
 footer{padding-bottom:90px}
}
@media(prefers-reduced-motion:reduce){
 .hero-backdrop img,.project-media{transform:none!important}
 .cookie-dialog[open],.faq-list details[open] p{animation:none!important}
}
@media(max-width:380px){
 .navigation{gap:8px}
 .brand{font-size:1.05rem;gap:8px}
 .brand-mark{width:36px;height:36px}
 .brand small{font-size:.55rem;letter-spacing:.14em}
 .hero-scene h1{font-size:9vw}
}


/* ─────────── Botón de WhatsApp ───────────
   Sobre papel crema un verde apagado se pierde, así que va el más vivo y con
   un halo que late despacio para que el ojo lo encuentre. El borde de tinta
   lo ata al resto del diseño: sin él parecía pegado de otra web. */
.whatsapp-link{position:fixed;left:auto;right:22px;bottom:22px;z-index:60;
  width:66px;height:66px;padding:0;display:grid;place-items:center;
  background:#00D95A;color:#fff;border:2.5px solid var(--ink);border-radius:50%;
  box-shadow:0 6px 18px rgba(0,0,0,.3), 0 0 0 0 rgba(0,217,90,.55);
  animation:wasap-latido 2.6s ease-out infinite;
  transition:background .2s,transform .16s,box-shadow .2s}
.whatsapp-link svg{width:36px;height:36px;fill:currentColor;stroke:none}
.whatsapp-link:hover{background:#00F065;transform:scale(1.08);animation:none;
  box-shadow:0 8px 26px rgba(0,0,0,.36), 0 0 0 10px rgba(0,217,90,.22)}
.whatsapp-link:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.whatsapp-link:active{transform:scale(.95)}

@keyframes wasap-latido{
  0%   {box-shadow:0 6px 18px rgba(0,0,0,.3), 0 0 0 0 rgba(0,217,90,.5)}
  70%  {box-shadow:0 6px 18px rgba(0,0,0,.3), 0 0 0 16px rgba(0,217,90,0)}
  100% {box-shadow:0 6px 18px rgba(0,0,0,.3), 0 0 0 0 rgba(0,217,90,0)}
}

@media(max-width:800px){
  .whatsapp-link{right:16px;bottom:16px;width:60px;height:60px}
  .whatsapp-link svg{width:32px;height:32px}
}
/* Si el visitante ha pedido menos movimiento, el halo se queda quieto. */
@media(prefers-reduced-motion:reduce){
  .whatsapp-link{animation:none;transition:none}
}


/* El número 01, 02, 03 de las tarjetas se dibuja en la esquina superior
   izquierda, donde el diseño original pone el icono. En las tarjetas que
   empiezan directamente por el título (paquetes, planes, condiciones) se
   montaba encima del texto. */
.service.sin-numero:before{display:none}
.service.sin-numero{padding-top:30px}


/* ─────────── Medidor de velocidad ─────────── */
.medidor-form{display:flex;gap:14px;flex-wrap:wrap;max-width:680px;margin-top:8px}
.medidor-form input{flex:1 1 280px;min-width:0;font:inherit;font-size:1rem;
  padding:16px 20px;border-radius:999px;border:2px solid var(--paper);
  background:var(--paper);color:var(--ink)}
.medidor-form input:focus{outline:3px solid var(--coral);outline-offset:2px}
.medidor-form .button[disabled]{opacity:.6;cursor:wait}
.medidor-resultado{display:flex;gap:26px;align-items:center;flex-wrap:wrap;
  margin-top:30px;max-width:680px;padding:26px 28px}
.medidor-resultado[hidden]{display:none}
.medidor-resultado .stamp-number{font-size:52px;line-height:1;flex:0 0 auto;
  width:96px;height:96px;display:grid;place-items:center;border-radius:50%;
  border:2px solid var(--ink)}
.medidor-resultado .stamp-number.buena{background:#8FD9A2}
.medidor-resultado .stamp-number.regular{background:#EFBE4E}
.medidor-resultado .stamp-number.mala{background:var(--coral);color:var(--paper)}
.medidor-resultado > div{flex:1 1 260px}
.medidor-resultado h3{margin:0 0 8px}
.medidor-resultado .form-note{margin:0 0 16px}
.medidor-nota{margin-top:20px;max-width:680px}
@media(max-width:620px){
  .medidor-resultado{padding:22px}
  .medidor-resultado .stamp-number{width:80px;height:80px;font-size:42px}
}


/* ─────────── Huecos de reserva ─────────── */
.huecos{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.hueco-dia,.hueco-hora{font:inherit;cursor:pointer;background:var(--paper);
  border:2px solid var(--ink);border-radius:10px;padding:10px 14px;
  transition:background .18s,color .18s,translate .14s}
.hueco-dia{display:grid;justify-items:center;gap:2px;min-width:74px}
.hueco-dia small{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7}
.hueco-dia strong{font-size:1.5rem;line-height:1}
.hueco-hora{border-radius:999px;font-weight:700;font-size:.95rem}
.hueco-dia:hover,.hueco-hora:hover{translate:0 -2px}
.hueco-dia.elegido,.hueco-hora.elegido{background:var(--coral);color:var(--paper);
  box-shadow:4px 4px 0 var(--ink)}
@media(max-width:620px){
  .hueco-dia{min-width:66px;padding:8px 10px}
  .hueco-dia strong{font-size:1.3rem}
}


/* ─────────── Selector de idioma ─────────── */
.idioma{display:inline-grid;place-items:center;font-size:.72rem;font-weight:800;
  letter-spacing:.1em;width:38px;height:38px;border:2px solid var(--ink);
  border-radius:50%;margin-left:auto;margin-right:14px;flex:0 0 auto;
  transition:background .18s,color .18s}
.idioma:hover{background:var(--ink);color:var(--paper)}
@media(max-width:900px){.idioma{margin-right:10px;width:34px;height:34px;font-size:.66rem}}


/* ─────────── Pictogramas de las tarjetas de servicio ───────────
   El contador iba en color papel sobre disco de papel (invisible) y encima
   del icono. Ahora el numero se lee y el disco se va al lado contrario. */
.service:before{left:auto;right:36px;color:var(--ink)}
.service .pictograma{display:block;width:58px;height:58px;margin:0 0 20px;
  overflow:visible;transition:transform .45s var(--ease)}
.service:hover .pictograma{transform:rotate(-4deg) scale(1.06)}
.service-pie{margin-top:auto;padding-top:20px;display:flex;align-items:center;
  justify-content:space-between;gap:16px}
.service-pie .form-note{margin:0}
.service-pie .card-arrow{margin-top:0;flex-shrink:0}
.directory .service .pictograma{width:64px;height:64px}
@media(max-width:1100px){.service:before{right:28px}}
@media(prefers-reduced-motion:reduce){.service .pictograma{transition:none}
  .service:hover .pictograma{transform:none}}

/* ==PICTOGRAMAS== */
/* ─────────── Pictogramas de las tarjetas de servicio ───────────
   El contador iba en color papel sobre disco de papel (invisible) y encima
   del icono. Ahora el numero se lee y el disco se va al lado contrario. */
.service:before{left:auto;right:36px;color:var(--ink)}
.service .pictograma{display:block;width:58px;height:58px;margin:0 0 20px;
  overflow:visible;transition:transform .45s var(--ease)}
.service:hover .pictograma{transform:rotate(-4deg) scale(1.06)}
.service-pie{margin-top:auto;padding-top:16px;display:flex;align-items:center;
  justify-content:space-between;gap:16px}
.service-pie .form-note{margin:0}
.service-pie .card-arrow{margin-top:0;flex-shrink:0}
/* El texto respiraba de mas por abajo: entre el gancho y el precio habia
   67px de nada. Con el pie ya separando, el parrafo no necesita margen. */
.service>p{margin-bottom:4px}
/* El precio venia en gris oscuro, heredado de las paginas de papel. Sobre
   la tarjeta oscura de la portada eso es 2:1 de contraste, o sea ilegible. */
.dark .service-pie .form-note{color:#c8c0a8}
/* Y la flecha, peor todavia: tinta sobre tarjeta de tinta, 1:1 de contraste.
   Estaba pintada del mismo color exacto que el fondo. Al pasar el raton el
   circulo se llena de coral, y ahi la flecha si tiene que volver a tinta. */
.dark .service .card-arrow{color:var(--paper);border-color:var(--paper)}
.dark .service:hover .card-arrow{color:var(--ink);border-color:var(--ink)}
.directory .service .pictograma{width:64px;height:64px}
/* Los del menu desplegable, en la casilla de 30px que ya tenia la rejilla.
   Como ya no son un <span>, la regla de color de span:first-child deja de
   aplicarles: el trazo pasa a currentColor, que ahi es tinta sobre papel. */
.pictograma-menu{display:block;width:28px;height:28px}
.dropdown-grid a:hover .pictograma-menu,
.dropdown-grid a:focus-visible .pictograma-menu{color:#b93425}
@media(max-width:1100px){.service:before{right:28px}}
@media(prefers-reduced-motion:reduce){.service .pictograma{transition:none}
  .service:hover .pictograma{transform:none}}

/* ── Un punto menos de tamano ────────────────────────────────────────────
   El 95 %. Todo se veia grande de mas en una pantalla normal: la letra la
   primera. Esto no toca ni una sola medida del diseno, encoge el conjunto
   al 95 % igual que el zoom del navegador.
   Va en body y no en :root a proposito: las media queries siguen midiendo
   el ancho real de la ventana, que el zoom no cambia, asi que la
   maquetacion es exactamente la misma que antes y lo unico que baja es el
   tamano aparente. Si se pusiera en :root pasaria lo mismo, pero dejarlo
   en body deja claro que html sigue siendo el sistema de referencia.
   El movil se queda fuera: ahi los tamanos ya estan al limite de lo legible.
   La trampa: dentro de un elemento con zoom, 100vw sigue valiendo el ancho
   real de la ventana, que dentro del espacio encogido se queda un 5 %
   corto. Se nota en lo que tiene que llegar de borde a borde -la barra de
   lectura-, y para eso esta --lienzo, que es el ancho de verdad disponible.
   Donde 100vw solo pone un tope de ancho da igual: un maximo un 5 % mas
   prudente no se nota en ningun sitio. */
@media(min-width:801px){
 :root{--lienzo:calc(100vw / .95)}
 body{zoom:.95}
 .progress{width:var(--lienzo)}
}