/* Topsellia — sistema común (home y programa web gratis) */
:root{
  --tinta:#0a0a0c; --tinta-2:#17171b; --papel:#ffffff; --papel-2:#f1f1f3; --linea:#e2e2e6;
  --chile:#e4007c; --chile-texto:#c4006a; --cempa:#ffb400; --agave:#0a0a0c; --gris:#55555e; --gris-claro:#a3a3ad;
  --serif:"Yellowtail", "Brush Script MT", cursive;
  --cartel:"Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --sans:"Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --r:10px; --sombra:0 40px 80px -30px rgba(10,10,12,.55), 0 10px 24px -12px rgba(10,10,12,.3);
  --borde:clamp(16px, 4vw, 56px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--papel);color:var(--tinta);font-family:var(--sans);font-size:clamp(16px,1.05vw,18px);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
em,.serif{font-family:var(--serif);font-style:normal;font-weight:400;letter-spacing:0;text-transform:none}
::selection{background:var(--chile);color:#fff}

/* sin grano: Topsellia es nítida, de pantalla */

.envoltura{width:100%;max-width:1360px;margin-inline:auto;padding-inline:var(--borde)}
.etiqueta{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;display:inline-flex;align-items:center;gap:.6em}
.etiqueta::before{content:"";width:22px;height:1px;background:currentColor}

/* botones */
.btn{--fondo:var(--tinta);--color:var(--papel);position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.7em;
  padding:1.05em 1.6em;border-radius:6px;background:var(--fondo);color:var(--color);text-decoration:none;font-weight:600;
  font-size:1rem;letter-spacing:-.005em;border:0;cursor:pointer;transition:transform .4s var(--ease),background .3s}
.btn:hover{transform:translateY(-2px)}
.btn .flecha{display:inline-block;transition:transform .4s var(--ease)}
.btn:hover .flecha{transform:translateX(4px) rotate(-45deg)}
.btn--chile{--fondo:var(--chile);--color:#fff}
.btn--claro{--fondo:var(--papel);--color:var(--tinta)}
.btn--linea{--fondo:transparent;--color:currentColor;box-shadow:inset 0 0 0 1.5px currentColor}
@media (prefers-reduced-motion:no-preference){
  .btn--chile::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
    transform:translateX(-120%);animation:brillo 6.5s 2s infinite}
}
@keyframes brillo{0%,80%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* ventana de navegador (mockup) */
.ventana{border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--sombra);position:relative;isolation:isolate}
.ventana__barra{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#eceae6;border-bottom:1px solid rgba(0,0,0,.06)}
.ventana__barra i{width:10px;height:10px;border-radius:50%;background:#d4d0ca}
.ventana__barra i:first-child{background:#ec6a5e}.ventana__barra i:nth-child(2){background:#f4bf4f}.ventana__barra i:nth-child(3){background:#61c554}
.ventana__url{margin-left:12px;flex:1;max-width:280px;font-size:11px;color:#6d6862;background:#fff;border-radius:6px;padding:4px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ventana__url::before{content:"🔒︎ ";filter:grayscale(1);opacity:.6}
.ventana__cuerpo{position:relative;overflow:hidden;aspect-ratio:16/10.5}
.sitio{position:absolute;inset:0 0 auto 0;transition:transform 5s cubic-bezier(.45,.05,.3,1)}
.ventana:hover .sitio,.ventana:focus-within .sitio{transform:translateY(calc(var(--desplazar,0px) * -1))}

/* — sitio: barbería — */
.s-nav{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:4.5% 6%;font-size:clamp(6px,.75cqi,11px);letter-spacing:.2em;text-transform:uppercase}
.s-boton{display:inline-block;font-size:clamp(6px,1.1cqi,13px);padding:.9em 1.5em;border-radius:2px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.s-barber{background:#3d0a0f;color:#f3e9dc;font-family:var(--sans)}
.s-barber .s-poste{height:clamp(4px,1.1cqi,12px);background:repeating-linear-gradient(-45deg,#c81d25 0 8px,#f3e9dc 8px 16px,#16243f 16px 24px,#f3e9dc 24px 32px)}
.s-barber .s-hero{position:relative;aspect-ratio:16/9.9;display:grid;grid-template-columns:1.15fr .85fr;gap:5%;padding:7% 6% 5%;align-items:end}
.s-barber .s-nav{padding:3.2% 6%;top:clamp(4px,1.1cqi,12px)}
.s-barber .s-logo{font-family:var(--cartel);font-weight:800;font-size:clamp(8px,1.5cqi,18px);letter-spacing:.18em}
.s-barber h3{font-family:var(--cartel);font-weight:900;text-transform:uppercase;font-size:clamp(24px,9.2cqi,124px);line-height:.8;letter-spacing:-.01em}
.s-barber h3 span{display:block;color:transparent;-webkit-text-stroke:clamp(1px,.18cqi,2px) #c8a24a}
.s-barber p{font-size:clamp(6px,1.2cqi,14px);opacity:.82;margin:1em 0 1.3em;max-width:34ch}
.s-barber .s-boton{background:#c8a24a;color:#3d0a0f}
.s-barber .s-arco{position:relative;height:100%;border-radius:999px 999px 6px 6px;overflow:hidden;box-shadow:0 0 0 clamp(2px,.4cqi,5px) #c8a24a}
.s-barber .s-arco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:28% 30%}
.s-barber .s-firma{position:absolute;z-index:3;right:4%;bottom:6%;font-family:var(--serif);font-size:clamp(12px,3.4cqi,44px);color:#f3e9dc;transform:rotate(-8deg);text-shadow:0 2px 12px rgba(0,0,0,.6)}
.s-barber .s-lista{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(243,233,220,.18)}
.s-barber .s-lista div{padding:5% 8%;font-size:clamp(6px,1.15cqi,14px);border-left:1px solid rgba(243,233,220,.18)}
.s-barber .s-lista div:first-child{border-left:0}
.s-barber .s-lista b{display:block;font-family:var(--cartel);font-weight:800;text-transform:uppercase;font-size:clamp(12px,3.2cqi,42px);line-height:1;color:#c8a24a;letter-spacing:.02em}

/* — sitio: taquería — */
.s-taco{background:#1a0f0a;color:#fbe9d6}
.s-taco .s-hero{position:relative;aspect-ratio:16/10.5;overflow:hidden;display:grid;grid-template-columns:1fr 1.1fr}
.s-taco .s-hero img{width:100%;height:100%;object-fit:cover}
.s-taco .s-izq{padding:12% 8% 8%;display:flex;flex-direction:column;justify-content:flex-end;background:#c2411f;position:relative}
.s-taco .s-nav{color:#fbe9d6}
.s-taco h3{font-weight:800;font-stretch:75%;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:clamp(20px,6.4cqi,86px);line-height:.86;letter-spacing:-.02em}
.s-taco h3 span{color:#1a0f0a}
.s-taco p{font-size:clamp(6px,1.2cqi,14px);margin:1em 0 1.4em;max-width:30ch}
.s-taco .s-boton{background:#1a0f0a;color:#fbe9d6;border-radius:999px;align-self:flex-start}
.s-taco .s-sello{position:absolute;right:-9%;top:16%;width:22%;aspect-ratio:1;border-radius:50%;background:#f4c542;color:#1a0f0a;display:grid;place-items:center;text-align:center;
  font-weight:800;font-size:clamp(5px,1cqi,12px);line-height:1.1;text-transform:uppercase;transform:rotate(-12deg);z-index:3}
.s-taco .s-menu{padding:6% 6% 8%;display:grid;grid-template-columns:repeat(2,1fr);gap:4% 8%}
.s-taco .s-menu div{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(251,233,214,.3);padding-bottom:.6em;font-size:clamp(6px,1.3cqi,15px)}
.s-taco .s-menu b{color:#f4c542}

/* — sitio: dental — */
.s-dental{background:#f7f8f5;color:#1f2e2a}
.s-dental .s-nav{position:relative;color:#1f2e2a;padding:3.5% 6%}
.s-dental .s-logo{font-weight:700;letter-spacing:.04em;text-transform:none;font-size:clamp(8px,1.4cqi,16px)}
.s-dental .s-logo i{display:inline-block;width:.8em;height:.8em;border-radius:50%;background:#7fa898;margin-right:.4em;vertical-align:-.05em}
.s-dental .s-hero{display:grid;grid-template-columns:1fr 1fr;gap:5%;padding:2% 6% 6%;align-items:center}
.s-dental h3{font-weight:500;font-size:clamp(18px,4.8cqi,64px);line-height:1;letter-spacing:-.035em}
.s-dental h3 em{color:#4f7d6c}
.s-dental p{font-size:clamp(6px,1.2cqi,14px);color:#5a6763;margin:1em 0 1.4em}
.s-dental .s-boton{background:#1f2e2a;color:#fff;border-radius:999px;text-transform:none;letter-spacing:0}
.s-dental .s-foto{border-radius:clamp(8px,2cqi,28px);overflow:hidden;aspect-ratio:4/4.6}
.s-dental .s-foto img{width:100%;height:100%;object-fit:cover}
.s-dental .s-datos{display:grid;grid-template-columns:repeat(3,1fr);gap:3%;padding:0 6% 7%}
.s-dental .s-datos div{background:#fff;border-radius:clamp(6px,1.2cqi,16px);padding:8%;font-size:clamp(6px,1.1cqi,13px);color:#5a6763}
.s-dental .s-datos b{display:block;font-size:clamp(12px,2.8cqi,36px);color:#1f2e2a;font-weight:500;letter-spacing:-.03em}

/* — sitio: café — */
.s-cafe{background:#efe3d0;color:#3b2417}
.s-cafe .s-nav{position:relative;color:#3b2417;padding:3.5% 6%}
.s-cafe .s-logo{font-family:var(--serif);font-size:clamp(11px,2.2cqi,26px);letter-spacing:0;text-transform:none}
.s-cafe .s-hero{padding:0 6%}
.s-cafe h3{font-family:var(--cartel);font-weight:800;text-transform:uppercase;font-size:clamp(22px,8.6cqi,116px);line-height:.84;letter-spacing:.01em;text-align:center}
.s-cafe .s-foto{margin-top:3%;border-radius:999px 999px 0 0;overflow:hidden;aspect-ratio:16/7}
.s-cafe .s-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.s-cafe .s-pie{display:flex;justify-content:space-between;align-items:center;padding:4% 6% 7%;font-size:clamp(6px,1.2cqi,14px)}
.s-cafe .s-boton{background:#3b2417;color:#efe3d0;border-radius:999px;text-transform:none;letter-spacing:0}

.ventana__cuerpo{container-type:inline-size}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}