/* Kuota, landing. Paredes planas como las fachadas de Coro, un ticket como única pieza protagonista.
   Sin fotos, sin sombras, sin degradados. Se escribe primero para 360 px. */
:root{
  --ocre:#E8A33D; --tinta:#1F1A17; --noche:#0C2E2D; --petroleo:#0F4C4A; --arcilla:#C4532B; --arcilla-texto:#A8431F;
  --crema:#F6EBDD; --blanco:#FFFCF7; --menta:#DCEBE6; --gris:#5F5650; --linea:#E6DACB;
  --titulo:"Young Serif",Georgia,serif; --texto:"Albert Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --num:"Anybody","Arial Narrow",Impact,sans-serif;
  --lado:16px; --aire:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--ocre);color:var(--tinta);font:400 17px/1.55 var(--texto);overflow-x:hidden}
h1,h2,h3,p,ol,ul,dl,dd,fieldset{margin:0;padding:0;border:0}
ol,ul{list-style:none}
h1,h2{font-family:var(--titulo);font-weight:400;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(38px,6.4vw,72px);line-height:1.05;max-width:17ch}
h3{font-size:20px;line-height:1.25}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
.noche :focus-visible,.pie :focus-visible,.arcilla :focus-visible{outline-color:var(--crema)}
.oculto{position:absolute;width:0;height:0}
.lg-bg{stroke:var(--logo-bg,var(--ocre))}
.saltar{position:absolute;left:-999px;top:8px;z-index:9;background:var(--tinta);color:var(--crema);padding:12px 16px}
.saltar:focus{left:8px}
.cifra{font-family:var(--num);font-weight:800;font-variation-settings:"wdth" 70;font-variant-numeric:tabular-nums}
.nota{font-size:14px;line-height:1.4}
.grande{font-size:clamp(20px,2.4vw,26px);line-height:1.35;max-width:32ch}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:10px 24px;border:0;border-radius:4px;font-weight:700;font-size:17px;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer}
.btn:active{transform:translateY(2px)}
.btn-tinta{background:var(--tinta);color:var(--crema)}
.btn-arcilla{background:var(--arcilla-texto);color:#fff}
.btn-petroleo{background:var(--petroleo);color:#fff;min-height:48px;padding:8px 16px;font-size:16px}

/* Paredes */
.pared{padding:var(--aire) max(var(--lado),calc((100% - 1120px)/2))}
.pared>*+*{margin-top:24px}
.noche{background:var(--noche);color:var(--crema)}
.crema{background:var(--crema)}
.arcilla{background:var(--arcilla);color:#fff}
.menta{background:var(--menta)}
.blanco{background:var(--blanco)}

/* Cabeza */
.cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:calc(1120px + 2*var(--lado));margin:0 auto;padding:12px var(--lado) 0}
.logo{display:flex;padding:6px 0}
.logo svg{display:block;width:112px;height:40px}
.cabeza nav{display:flex;align-items:center;gap:20px;font-weight:700;font-size:16px}
.cabeza nav a{display:none;text-decoration:none;padding:12px 0}
.cabeza nav a.nav-wa{display:inline-flex;padding:12px 0;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* Portada */
.portada{padding-top:28px;padding-bottom:0}
.portada-texto{display:grid;justify-items:start;gap:18px}
h1{font-size:clamp(58px,17.4vw,132px);line-height:.98}
body.citas h1{font-size:clamp(44px,12.6vw,104px)}
.entrada{font-size:clamp(21px,2.5vw,27px);line-height:1.3;max-width:27ch}
.que-es{max-width:44ch}

/* Ticket: sale de la ranura una sola vez y monta sobre la pared de abajo */
.impresora{position:relative;z-index:1;max-width:440px;margin-top:36px;margin-bottom:-56px;padding-top:12px}
.impresora::before{content:"";position:absolute;left:-8px;right:-8px;top:0;height:14px;background:var(--tinta);border-radius:3px;z-index:2}
.ticket{display:grid;gap:14px;margin-inline:4px;padding:30px 18px 34px;background:var(--blanco);color:var(--tinta);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%;
  animation:imprimir 900ms cubic-bezier(.2,.7,.2,1) both}
@keyframes imprimir{from{clip-path:inset(0 0 100% 0);transform:translateY(-40px)}to{clip-path:inset(0 0 -20px 0);transform:none}}
.ticket h2{font-size:28px;line-height:1.15}
.ticket .nota{color:var(--gris)}
.negocios{display:flex;flex-wrap:wrap;gap:6px}
.negocios legend{float:left;width:100%;padding:0;font-weight:700;margin-bottom:6px}
.negocios label{position:relative;cursor:pointer}
.negocios input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.negocios span{display:flex;align-items:center;min-height:44px;padding:0 12px;border:1.5px solid var(--tinta);border-radius:4px;font-size:15px;font-weight:500}
.negocios input:checked+span{background:var(--tinta);color:var(--crema)}
.negocios input:focus-visible+span{outline:3px solid var(--petroleo);outline-offset:2px}
.linea{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1.5px dashed #BDAE9F;line-height:1.25}
.linea label{min-width:0;font-size:16px}
.paso{display:grid;grid-template-columns:44px 56px 44px;flex:none;align-items:center}
.paso button{height:48px;border:0;border-radius:4px;background:var(--crema);font-size:24px;line-height:1;cursor:pointer}
.paso input{width:100%;height:48px;border:0;background:none;padding:0;text-align:center;font-family:var(--num);font-weight:800;font-variation-settings:"wdth" 70;font-size:26px;-moz-appearance:textfield;appearance:textfield}
.paso input::-webkit-outer-spin-button,.paso input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.suma{display:grid;gap:4px;padding-top:12px;border-top:2.5px solid var(--tinta)}
.fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fila .cifra{font-size:26px}
.fila-grande span{font-weight:700;font-size:19px;line-height:1.15;max-width:11ch}
.fila-grande .cifra{font-size:64px;line-height:1;color:var(--arcilla-texto)}

/* El día */
.noche{padding-top:calc(var(--aire) + 56px)}
.horas{display:grid;gap:30px}
.horas li{display:grid;gap:2px}
.horas time{font-family:var(--num);font-weight:800;font-variation-settings:"wdth" 60;font-size:40px;line-height:1.1;color:var(--ocre)}
.horas p{font-family:var(--titulo);font-size:clamp(24px,3.2vw,36px);line-height:1.22;max-width:24ch}
.cierre-dia{font-size:20px;line-height:1.35;max-width:32ch}
.noche .nota{opacity:.75}

/* El mes */
body:not(.citas) .solo-citas,body.citas .solo-cuotas{display:none}
.mes{display:grid;gap:44px;counter-reset:n}
.mes>li{display:grid;gap:10px;align-content:start}
.dia{display:block;margin-bottom:2px;font:700 16px/1.4 var(--texto);color:var(--arcilla-texto)}
.mes h3{font-size:25px;font-family:var(--titulo);font-weight:400}
.mes>li>p:not(.burbuja):not(.ficha){color:var(--gris);max-width:38ch}
.burbuja{justify-self:start;max-width:30ch;padding:10px 14px;margin-top:4px;border-radius:2px 14px 14px 14px;background:#D9F2D8;font-size:16px;line-height:1.35}
.ficha{display:flex;justify-content:space-between;gap:16px;max-width:320px;padding:12px 0;margin-top:4px;border-block:2px solid var(--tinta)}
.ficha b{font-family:var(--num);font-weight:800;font-variation-settings:"wdth" 70;font-size:21px}
.confirma{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:320px;padding:10px 0;margin-top:4px;border-block:2px solid var(--tinta);font-size:15px}
.confirma span b{display:block;font-size:17px}
.pagado{font-weight:700;color:var(--petroleo);font-size:17px;border:2.5px solid var(--petroleo);border-radius:4px;padding:6px 12px;transform:rotate(-5deg);animation:sellar .28s cubic-bezier(.3,1.4,.5,1) both}
@keyframes sellar{from{transform:scale(1.9) rotate(-14deg);opacity:0}to{transform:scale(1) rotate(-5deg);opacity:1}}
.cierre{max-width:320px;margin-top:4px}
.cierre div{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0}
.cierre dd{font-size:22px}
.cierre .queda{border-top:2.5px solid var(--tinta);margin-top:4px;font-weight:700}
.cierre .queda dd{font-size:38px;line-height:1;color:var(--petroleo)}
.horario{display:flex;gap:6px}
.horario li{flex:1;max-width:104px;padding:10px 6px;text-align:center;background:var(--petroleo);color:#fff;font-weight:700;border-radius:4px}
.horario .ocupada{background:none;color:var(--gris);box-shadow:inset 0 0 0 1.5px #BDAE9F;font-weight:500;padding-block:4px}
.horario .ocupada span{display:block;font-size:13px}
.crema>.nota{color:var(--gris)}

/* Racha */
.arcilla h2{max-width:13ch}
.sellos{display:grid;grid-template-columns:repeat(5,minmax(0,64px));gap:10px}
.sellos li{aspect-ratio:1;border:2.5px dashed rgba(255,255,255,.75);border-radius:50%}
.sellos li.on{border:0;background:var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8A33D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/62% no-repeat}
.sellos li.nuevo{animation:golpe .3s cubic-bezier(.3,1.4,.5,1) both}
@keyframes golpe{from{transform:scale(1.7) rotate(-16deg);opacity:0}to{transform:none;opacity:1}}
.estado{font-weight:700;font-size:20px}

/* Visita */
.pasos{display:grid;gap:26px;counter-reset:p}
.pasos li{counter-increment:p;display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:8px}
.pasos li::before{content:counter(p);grid-row:span 2;font-family:var(--num);font-weight:800;font-variation-settings:"wdth" 60;font-size:56px;line-height:.95;color:var(--petroleo)}
.pasos h3{font-size:22px}
.pasos p{grid-column:2;max-width:38ch}

/* Precios */
.planes{display:grid;gap:12px}
.plan{display:grid;gap:10px;align-content:start;padding:24px 20px 30px;background:var(--blanco);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%}
.plan h3{font-family:var(--titulo);font-weight:400;font-size:30px}
.precio b{font-size:84px;line-height:.95}
.plan ul{display:grid;gap:6px;padding-top:12px;border-top:1.5px dashed #BDAE9F;font-weight:500}
.precios>p:last-child{max-width:52ch}
.precios .grande{max-width:30ch}

/* Dudas */
.dudas details{border-top:1.5px solid var(--tinta)}
.dudas details:last-child{border-bottom:1.5px solid var(--tinta)}
.dudas summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:12px 0;font-weight:700;font-size:18px;line-height:1.3;cursor:pointer;list-style:none}
.dudas summary::-webkit-details-marker{display:none}
.dudas summary::after{content:"+";font-size:28px;line-height:1;font-weight:400}
.dudas details[open] summary::after{content:"−"}
.dudas p{padding-bottom:18px;max-width:60ch;color:var(--gris)}

/* Cierre y pie */
.final{padding-block:var(--aire)}
.final h2{font-size:clamp(46px,8.6vw,104px);max-width:13ch}
.contacto{display:grid;gap:4px;font-weight:700}
.contacto a{display:inline-block;padding:10px 0;text-underline-offset:4px}
.pie{display:grid;gap:14px;padding:44px max(var(--lado),calc((100% - 1120px)/2)) calc(92px + env(safe-area-inset-bottom));background:var(--noche);color:var(--crema);font-size:15px}
.logo-pie{display:block;width:112px;height:40px;--logo-bg:var(--noche)}
.fija{position:fixed;left:var(--lado);right:var(--lado);bottom:calc(12px + env(safe-area-inset-bottom));z-index:5;display:flex;align-items:center;justify-content:center;min-height:54px;background:var(--tinta);color:var(--crema);font-weight:700;text-decoration:none;border-radius:4px;transform:translateY(160%);transition:transform .25s}
.fija.ver{transform:none}

@media (min-width:760px){
  :root{--lado:32px;--aire:112px}
  .cabeza nav a{display:inline-flex}
  .mes{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 56px}
  .horas li{grid-template-columns:230px minmax(0,1fr);align-items:baseline}
  .horas time{font-size:52px}
  .planes{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
  .pasos{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .pasos li{grid-template-columns:minmax(0,1fr)}
  .pasos li::before{grid-row:auto;margin-bottom:8px}
  .pasos p{grid-column:1}
  .fija{display:none}
}
@media (min-width:980px){
  .portada:not(.final){display:grid;grid-template-columns:minmax(0,1fr) 420px;column-gap:56px;align-items:start;padding-top:48px}
  .portada:not(.final)>*{margin-top:0;max-width:none}
  .portada-texto{padding-top:32px;padding-bottom:64px;gap:24px}
  h1{font-size:clamp(84px,9.4vw,124px)}
  body.citas h1{font-size:clamp(66px,7.4vw,96px)}
  .portada:not(.final) .impresora{margin-bottom:-120px}
  .noche{padding-top:var(--aire)}
  .noche>h2{max-width:13ch}
  .horas{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:48px}
  .horas li{grid-template-columns:minmax(0,1fr);align-content:start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}