/* 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}
.navigation{height:94px;transition:height .3s var(--ease)}
.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)}
.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))}
.hero-backdrop img{transform:none;mask-image:linear-gradient(to right,transparent,#000 30%);-webkit-mask-image:linear-gradient(to right,transparent,#000 30%)}
.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}
.projects-grid{grid-template-columns:1fr 1fr;gap:48px 36px;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:22px 0 0}
.project-info .eyebrow{font-size:.8125rem;letter-spacing:.14em;margin-bottom:11px}
.project-info strong{font-family:Fraunces,Georgia,serif;font-weight:900;font-size:clamp(1.8rem,2.8vw,2.7rem);line-height:1.05;letter-spacing:-.04em;padding-right:64px}
.project-info .meta{font-size:.875rem;margin-top:14px}
.project-info .card-arrow{display:grid;place-items:center;right:0;top:45px;width:48px;height:48px;border:1px solid var(--ink);border-radius:50%;font-size:1.5rem;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}
@media(min-width:1000px){.projects-grid:not(.is-filtered) .project:nth-child(even){margin-top:95px}.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{gap:38px 24px}
 .project-info strong{font-size:1.8rem;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}}