:root { --negro:#0a0a0b; --carbon:#131210; --panel:#191712; --oro:#d8b45a; --oro-claro:#f1d98b; --oro-osc:#a07a2c; --crema:#f2ede6; --gris:#b9b2a6; --linea:rgb(216 180 90 / .28); --menu:68px; }
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--menu) + 8px); }
body { background: var(--negro); color: var(--crema); font-family: "Inter", system-ui, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, video, iframe { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .012em; line-height: 1.02; }
h1 { font-size: clamp(2.7rem, 9.5vw, 5.6rem); } h2 { font-size: clamp(2rem, 6vw, 3.3rem); } h3 { font-size: 1.3rem; }
.oro { background: linear-gradient(180deg, var(--oro-claro), var(--oro) 55%, var(--oro-osc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.firma { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: clamp(1.3rem, 4vw, 1.9rem); color: var(--oro); }
.eti { font: 700 .74rem "Inter"; letter-spacing: .24em; text-transform: uppercase; color: var(--oro); margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }
.eti::before { content: ""; width: 34px; height: 1.5px; background: var(--oro); }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
section { padding: clamp(56px, 9vw, 104px) 0; }
.lede { color: #d9d2c6; font-size: 1.1rem; max-width: 46ch; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 28px; border-radius: 999px; font-weight: 700; text-decoration: none; border: 1.5px solid var(--oro); cursor: pointer; font: 700 1rem "Inter"; transition: transform .2s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-oro { background: linear-gradient(180deg, var(--oro-claro), var(--oro)); color: #14110a; } .btn-oro:hover { background: var(--oro-claro); }
.btn-linea { background: transparent; color: var(--oro); } .btn-linea:hover { background: rgb(216 180 90 / .12); }
.btn svg { width: 20px; height: 20px; }

/* menú */
header { position: sticky; top: 0; z-index: 50; height: var(--menu); background: rgb(10 10 11 / .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
header .wrap { height: 100%; display: flex; align-items: center; gap: 14px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: "Anton"; font-size: 1.2rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1; margin-right: auto; }
.marca img { width: 42px; height: 42px; } .marca small { display: block; font: 600 .6rem "Inter"; letter-spacing: .3em; color: var(--oro); margin-top: 3px; }
nav { display: none; gap: 30px; font-size: .92rem; font-weight: 600; } nav a { text-decoration: none; color: var(--gris); padding: 6px 0; border-bottom: 2px solid transparent; } nav a:hover, nav a[aria-current] { color: var(--oro); border-bottom-color: var(--oro); }
header .btn { min-height: 42px; padding: 0 20px; font-size: .9rem; white-space: nowrap; }
@media (max-width: 519px) { header .btn { display: none; } }
.burger { width: 44px; height: 44px; border: 1px solid var(--linea); border-radius: 10px; background: none; color: var(--oro); display: grid; place-items: center; cursor: pointer; }
.burger svg { width: 22px; height: 22px; }
.menu-movil { display: none; position: fixed; inset: var(--menu) 0 auto 0; background: var(--carbon); border-bottom: 1px solid var(--linea); padding: 8px 16px 20px; z-index: 49; }
.menu-movil.abierto { display: grid; } .menu-movil a { padding: 14px 4px; border-bottom: 1px solid var(--linea); text-decoration: none; font-weight: 600; font-size: 1.05rem; }
@media (min-width: 860px) { nav { display: flex; } .burger { display: none; } }

/* portada */
.hero { position: relative; overflow: hidden; padding: 44px 0 70px; background: radial-gradient(ellipse at 20% 0%, #2a2217 0%, var(--negro) 60%); }
.hero::after { content: ""; position: absolute; inset: auto -10% -40% 30%; height: 80%; background: radial-gradient(closest-side, rgb(216 180 90 / .16), transparent); pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; }
.hero h1 span { display: block; }
.hero .firma { margin: 16px 0 8px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.chip { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border: 1px solid var(--linea); border-radius: 999px; background: rgb(25 23 18 / .7); font-size: .86rem; font-weight: 600; }
.chip svg { width: 20px; height: 20px; color: var(--oro); flex: none; }
.vitrina { position: relative; width: min(420px, 100%); margin-inline: auto; }
.vitrina .foto { border-radius: 22px; overflow: hidden; border: 1px solid var(--linea); box-shadow: 0 30px 70px rgb(0 0 0 / .65); aspect-ratio: 4/5; }
.vitrina .foto img { width: 100%; height: 100%; object-fit: cover; }
.vitrina .sello { position: absolute; left: -14px; bottom: 26px; width: 108px; height: 108px; border-radius: 50%; border: 2px solid var(--oro); box-shadow: 0 10px 30px rgb(0 0 0 / .6); background: #000; }
.vitrina .etiq { position: absolute; right: -8px; top: 22px; background: var(--oro); color: #14110a; font: 800 .72rem "Inter"; letter-spacing: .16em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; box-shadow: 0 8px 20px rgb(0 0 0 / .5); }
@media (min-width: 900px) { .hero { padding: 72px 0 100px; } .hero .wrap { grid-template-columns: 1.1fr .9fr; gap: 64px; } .vitrina { margin-inline: 0 auto; } }

/* cifras */
.cifras { padding: 0; background: var(--carbon); border-block: 1px solid var(--linea); }
.cifras ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); }
.cifras li { padding: 26px 14px; text-align: center; border: 1px solid rgb(216 180 90 / .1); }
.cifras li b { display: block; font: 400 clamp(1.7rem, 5vw, 2.4rem) "Anton"; color: var(--oro); text-transform: uppercase; } .cifras li span { font-size: .85rem; color: var(--gris); font-weight: 600; }
@media (min-width: 760px) { .cifras ul { grid-template-columns: repeat(4, 1fr); } }

/* encabezados de sección */
.cab { display: grid; gap: 8px; margin-bottom: 36px; } .cab .lede { margin-top: 6px; }

/* comparador antes y después */
.comparadores { display: grid; gap: 26px; }
.comp { position: relative; aspect-ratio: 4/5; border-radius: 20px; overflow: hidden; border: 1px solid var(--linea); user-select: none; touch-action: pan-y; background: #000; }
.comp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comp .antes { clip-path: inset(0 50% 0 0); }
.comp .asa { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--oro); pointer-events: none; transform: translateX(-50%); }
.comp .asa::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--oro); color: #14110a; display: grid; place-items: center; font: 800 1rem "Inter"; letter-spacing: -.05em; box-shadow: 0 6px 18px rgb(0 0 0 / .55); }
.comp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.comp .tag { position: absolute; top: 14px; padding: 6px 14px; border-radius: 999px; background: rgb(10 10 11 / .85); color: var(--oro); font: 800 .7rem "Inter"; letter-spacing: .2em; text-transform: uppercase; pointer-events: none; }
.comp .tag.a { left: 14px; } .comp .tag.d { right: 14px; }
.nota { color: var(--gris); font-size: .85rem; margin-top: 18px; }
@media (min-width: 760px) { .comparadores { grid-template-columns: 1fr 1fr; gap: 32px; } }

/* proceso */
.proceso { background: var(--carbon); border-block: 1px solid var(--linea); }
.proceso .caja { display: grid; gap: 40px; align-items: center; }
.pasos { list-style: none; padding: 0; display: grid; gap: 0; counter-reset: p; position: relative; }
.pasos li { counter-increment: p; display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding-bottom: 28px; position: relative; }
.pasos li:last-child { padding-bottom: 0; }
.pasos li::before { content: counter(p); width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(180deg, var(--oro-claro), var(--oro)); color: #14110a; display: grid; place-items: center; font: 400 1.5rem "Anton"; z-index: 1; }
.pasos li:not(:last-child)::after { content: ""; position: absolute; left: 25.5px; top: 52px; bottom: 0; width: 1.5px; background: var(--linea); }
.pasos b { display: block; font-size: 1.12rem; margin-bottom: 2px; } .pasos span { color: var(--gris); }
.collage { border-radius: 22px; overflow: hidden; border: 1px solid var(--linea); }
@media (min-width: 900px) { .proceso .caja { grid-template-columns: 1fr 1fr; gap: 72px; } }

/* tarjetas de servicio */
.tarjetas { display: grid; gap: 18px; }
.tarjeta { background: linear-gradient(180deg, var(--panel), var(--carbon)); border: 1px solid var(--linea); border-radius: 20px; padding: 28px 24px; position: relative; overflow: hidden; }
.tarjeta.destacada { border-color: var(--oro); box-shadow: 0 0 0 1px rgb(216 180 90 / .25), 0 24px 60px rgb(0 0 0 / .5); }
.tarjeta .icono { width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--linea); display: grid; place-items: center; color: var(--oro); margin-bottom: 16px; } .tarjeta .icono svg { width: 28px; height: 28px; }
.tarjeta .precio { font: 400 2.6rem "Anton"; color: var(--oro); margin: 10px 0 2px; line-height: 1; } .tarjeta .precio small { font: 600 .8rem "Inter"; color: var(--gris); letter-spacing: .1em; text-transform: uppercase; margin-right: 6px; }
.tarjeta p { color: #d9d2c6; font-size: .98rem; }
.tarjeta ul { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 9px; font-size: .95rem; } .tarjeta li { display: flex; gap: 10px; } .tarjeta li::before { content: "✓"; color: var(--oro); font-weight: 800; }
.tarjeta .btn { margin-top: 22px; }
.etiqueta { position: absolute; top: 18px; right: -34px; transform: rotate(35deg); background: var(--oro); color: #14110a; font: 800 .66rem "Inter"; letter-spacing: .14em; text-transform: uppercase; padding: 6px 42px; }
@media (min-width: 860px) { .tarjetas.tres { grid-template-columns: repeat(3, 1fr); } .tarjetas.dos { grid-template-columns: 1fr 1fr; } }

/* lista de precios */
.precios { list-style: none; padding: 0; border: 1px solid var(--linea); border-radius: 20px; background: var(--panel); overflow: hidden; }
.precios li { display: flex; align-items: baseline; gap: 12px; padding: 18px 22px; border-bottom: 1px solid rgb(216 180 90 / .14); }
.precios li:last-child { border-bottom: 0; }
.precios li b { font-weight: 600; } .precios li i { flex: 1; border-bottom: 1px dotted rgb(216 180 90 / .4); transform: translateY(-4px); }
.precios li em { font: 400 1.5rem "Anton"; color: var(--oro); font-style: normal; }
.precios li small { display: block; color: var(--gris); font-size: .82rem; font-weight: 400; }

/* agenda */
.cita { background: radial-gradient(ellipse at 80% 20%, #251d12, var(--negro) 60%); }
.cita .caja { display: grid; gap: 34px; align-items: start; }
.form-cita { display: grid; gap: 16px; background: rgb(25 23 18 / .9); border: 1px solid var(--oro); border-radius: 22px; padding: 26px 22px; box-shadow: 0 30px 70px rgb(0 0 0 / .55); }
label { font-size: .82rem; color: var(--gris); display: grid; gap: 7px; font-weight: 700; letter-spacing: .04em; }
input[type=text], input[type=tel], input[type=date], select { height: 52px; border-radius: 12px; border: 1px solid #3a3326; background: var(--negro); color: var(--crema); padding: 0 14px; font: 500 1rem "Inter"; }
input:focus, select:focus { outline: 2px solid var(--oro); outline-offset: 1px; }
.fila { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.pequeno { font-size: .82rem; color: var(--gris); }
.horas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.horas label { display: block; } .horas input { position: absolute; opacity: 0; } .horas span { display: grid; place-items: center; height: 44px; border: 1px solid #3a3326; border-radius: 10px; color: var(--crema); font-size: .92rem; font-weight: 600; letter-spacing: 0; cursor: pointer; }
.horas input:checked + span { background: var(--oro); color: #14110a; border-color: var(--oro); } .horas input:focus-visible + span { outline: 2px solid var(--oro-claro); outline-offset: 2px; }
/* agenda en línea (23-oct): días como fichas que se deslizan, horas libres, confirmación */
.cita .caja > * { min-width: 0; }   /* la fila de días se desliza por dentro: no ensancha la página */
.campo { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 7px; }
.campo legend { font-size: .82rem; color: var(--gris); font-weight: 700; letter-spacing: .04em; padding: 0; margin-bottom: 7px; }
.dias { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: #5a4a26 transparent; }
.dia { flex: none; scroll-snap-align: start; width: 64px; display: grid; gap: 2px; justify-items: center; padding: 9px 0; border: 1px solid #3a3326; border-radius: 12px; background: var(--negro); color: var(--crema); cursor: pointer; font: inherit; transition: border-color .2s, background .2s; }
.dia small { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); } .dia b { font: 400 1.5rem/1 "Anton"; }
.dia:hover:not(:disabled) { border-color: var(--oro); }
.dia.elegido { background: var(--oro); border-color: var(--oro); color: #14110a; } .dia.elegido small { color: #3a2f15; }
.dia:disabled { opacity: .35; cursor: not-allowed; } .dia:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 2px; }
.form-cita.cargando .dias, .form-cita.cargando .horas { min-height: 76px; border-radius: 12px; background: linear-gradient(90deg, #1b1914 25%, #2a251b 50%, #1b1914 75%) 0 0 / 200% 100%; animation: brillo-carga 1.2s linear infinite; }
@keyframes brillo-carga { to { background-position: -200% 0; } }
.detalle-servicio { margin-top: -8px; line-height: 1.45; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cita-lista { background: rgb(25 23 18 / .9); border: 1px solid var(--oro); border-radius: 22px; padding: 30px 24px; display: grid; gap: 10px; box-shadow: 0 30px 70px rgb(0 0 0 / .55); }
.cita-lista h3 { font: 400 2.2rem/1.05 "Anton"; text-transform: uppercase; color: var(--oro); } .cita-lista:focus { outline: none; }
@media (max-width: 520px) { .form-cita .fila { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .form-cita .horas { grid-template-columns: repeat(4, 1fr); } }
.lista-puntos { list-style: none; padding: 0; margin-top: 22px; display: grid; gap: 12px; } .lista-puntos li { display: flex; gap: 12px; align-items: center; color: #d9d2c6; } .lista-puntos svg { width: 22px; height: 22px; color: var(--oro); flex: none; }
@media (min-width: 900px) { .cita .caja { grid-template-columns: .9fr 1.1fr; gap: 72px; } }

/* cómo llegar */
.ubicacion .rejilla { display: grid; gap: 32px; }
.datos { display: grid; gap: 20px; align-content: start; }
.dato { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 18px; border: 1px solid var(--linea); border-radius: 16px; background: var(--panel); }
.dato svg { width: 28px; height: 28px; color: var(--oro); margin-top: 2px; } .dato b { display: block; font: 700 .72rem "Inter"; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); margin-bottom: 3px; } .dato span { color: #e6e0d6; }
.mapa { border-radius: 20px; overflow: hidden; border: 1px solid var(--linea); min-height: 340px; background: var(--panel); } .mapa iframe { width: 100%; height: 100%; min-height: 340px; border: 0; filter: grayscale(.3) contrast(1.05); }
.recorrido { display: grid; gap: 32px; align-items: center; }
.tel { width: min(300px, 100%); margin-inline: auto; border: 8px solid #1b1914; border-radius: 34px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--linea), 0 30px 70px rgb(0 0 0 / .6); } .tel video { width: 100%; aspect-ratio: 9/16; object-fit: cover; }
@media (min-width: 900px) { .ubicacion .rejilla { grid-template-columns: .9fr 1.1fr; } .recorrido { grid-template-columns: 1fr 1fr; gap: 72px; } }

/* preguntas frecuentes */
.faq { display: grid; gap: 12px; max-width: 820px; }
details { border: 1px solid var(--linea); border-radius: 16px; background: var(--panel); }
summary { padding: 20px 22px; cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; } summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 1.7rem "Anton"; color: var(--oro); transition: transform .25s; } details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 22px 22px; color: #d9d2c6; }

/* banda final y pie */
.banda { text-align: center; padding: clamp(56px, 8vw, 90px) 0; background: linear-gradient(180deg, var(--carbon), var(--negro)); border-top: 1px solid var(--linea); }
.banda h2 { margin-bottom: 12px; } .banda .acciones { justify-content: center; }
footer { padding: 44px 0 100px; border-top: 1px solid var(--linea); color: var(--gris); font-size: .9rem; }
footer .wrap { display: grid; gap: 22px; } footer b { color: var(--crema); } footer .redes { display: flex; gap: 18px; flex-wrap: wrap; } footer a { text-decoration: none; color: var(--oro); font-weight: 600; }
@media (min-width: 760px) { footer .wrap { grid-template-columns: 1.4fr 1fr 1fr; } }
.flota { position: fixed; right: 14px; bottom: 14px; z-index: 40; } .flota .btn { min-height: 54px; box-shadow: 0 10px 28px rgb(0 0 0 / .55); }
@media (min-width: 900px) { .flota { display: none; } }

/* cabecera de página interior */
.pagina-cab { padding: 56px 0 28px; background: radial-gradient(ellipse at 15% 0%, #2a2217, var(--negro) 65%); border-bottom: 1px solid var(--linea); }
.pagina-cab h1 { font-size: clamp(2.4rem, 8vw, 4.4rem); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }

/* resultados: 3 en el inicio (negro, afro, canoso) y "Ver más resultados" con el resto (22-oct) */
.caso { margin: 0; } .caso figcaption { margin-top: 12px; text-align: center; font: 700 .78rem "Inter"; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
@media (min-width: 980px) { .comparadores.tres { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.acciones.centro { justify-content: center; margin-top: 30px; }
.pares { display: grid; gap: 22px; text-align: left; }
@media (min-width: 760px) { .pares { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pares { grid-template-columns: repeat(3, 1fr); } }
.par { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 18px; overflow: hidden; border: 1px solid var(--linea); background: #000; }
.par div { position: relative; aspect-ratio: 3/4; } .par img { width: 100%; height: 100%; object-fit: cover; display: block; }
.par .tag { position: absolute; top: 10px; padding: 5px 11px; border-radius: 999px; background: rgb(10 10 11 / .85); color: var(--oro); font: 800 .62rem "Inter"; letter-spacing: .18em; text-transform: uppercase; }
.par .tag.a { left: 10px; } .par .tag.d { right: 10px; }

/* botones que invitan: laten en el inicio y se quedan quietos al pasar el mouse (regla de Jonatan, 22-oct) */
.late { animation: late 2.4s ease-out infinite; }
.btn-linea.late { animation-delay: 1.2s; }
.btn.late:hover, .btn.late:focus-visible { animation: none; box-shadow: 0 10px 28px rgb(216 180 90 / .35); }
@keyframes late { 0% { box-shadow: 0 0 0 0 rgb(216 180 90 / .55); } 70%, 100% { box-shadow: 0 0 0 14px rgb(216 180 90 / 0); } }
@media (prefers-reduced-motion: reduce) { .late { animation: none; } }

/* Contáctanos: el video del recorrido (en bucle, sin sonido) y el mapa, juntos arriba (22-oct) */
.contacto-arriba { padding: 28px 0 32px; }
.titulo-fila { display: grid; gap: 10px; margin-bottom: 22px; } .titulo-fila h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); }
.ver-llegar { display: grid; gap: 20px; }
.ver-llegar .tel { width: min(280px, 100%); }
.datos.fila { margin-top: 0; }
@media (min-width: 900px) {
  .titulo-fila { grid-template-columns: auto 1fr; align-items: end; gap: 40px; } .titulo-fila .lede { justify-self: end; max-width: 46ch; }
  .ver-llegar { grid-template-columns: auto 1fr; height: clamp(420px, calc(100svh - var(--menu) - 190px), 640px); }
  .ver-llegar .tel { width: auto; height: 100%; margin: 0; } .ver-llegar .tel video { height: 100%; width: auto; }
  .ver-llegar .mapa, .ver-llegar .mapa iframe { height: 100%; min-height: 0; }
  .datos.fila { grid-template-columns: repeat(3, 1fr); }
}

/* portada con impacto (22-oct): fotos de hombres con cabello sano que pasan solas detrás del texto, y Henry en uniforme a la derecha */
.hero { background: var(--negro); isolation: isolate; }
.hero .fondos { position: absolute; inset: 0; z-index: -2; }
.hero .fondos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; animation: fondo 36s linear infinite; }
.hero .fondos img:nth-child(2) { animation-delay: 6s; } .hero .fondos img:nth-child(3) { animation-delay: 12s; }
.hero .fondos img:nth-child(4) { animation-delay: 18s; } .hero .fondos img:nth-child(5) { animation-delay: 24s; } .hero .fondos img:nth-child(6) { animation-delay: 30s; }
@keyframes fondo { 0% { opacity: 0; transform: scale(1.12); } 4% { opacity: 1; } 17% { opacity: 1; } 21% { opacity: 0; } 100% { opacity: 0; transform: scale(1); } }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(10 10 11 / .55), rgb(10 10 11 / .82) 55%, var(--negro)); }
@media (min-width: 900px) {
  .hero { min-height: calc(100svh - var(--menu)); display: grid; align-items: center; }
  .hero::before { background: linear-gradient(90deg, rgb(10 10 11 / .94) 0%, rgb(10 10 11 / .78) 38%, rgb(10 10 11 / .35) 70%, rgb(10 10 11 / .6) 100%), linear-gradient(0deg, var(--negro) 0%, transparent 22%); }
  .hero .vitrina { width: min(380px, 100%); justify-self: end; }
}
.hero .vitrina .foto { aspect-ratio: 4/5; }
@media (prefers-reduced-motion: reduce) { .hero .fondos img { animation: none; } .hero .fondos img:first-child { opacity: 1; } }
@media (min-width: 900px) {
  .hero { padding: 40px 0 48px; }
  .hero h1 { font-size: clamp(2.8rem, 5vw, 4.4rem); }
  .hero .firma { font-size: clamp(1.2rem, 1.7vw, 1.5rem); margin: 12px 0 6px; }
  .hero .chips { margin-top: 22px; }
}

/* 22-oct (tarde): la portada queda de una columna sin la foto de Henry; Henry pasa a Contáctanos y el mapa se achica */
.hero.solo .wrap { grid-template-columns: 1fr; } .hero.solo .wrap > div { max-width: 720px; }
.ver-llegar .henry { margin: 0; position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--linea); box-shadow: 0 24px 60px rgb(0 0 0 / .55); }
.ver-llegar .henry img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ver-llegar .henry figcaption { position: absolute; left: 14px; bottom: 14px; background: var(--oro); color: #14110a; font: 800 .7rem "Inter"; letter-spacing: .16em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; }
.ver-llegar .lado { display: grid; gap: 12px; align-content: start; }
.ver-llegar .lado .mapa, .ver-llegar .lado .mapa iframe { min-height: 0; height: 190px; }
.ver-llegar .lado .dato { padding: 12px 14px; }
@media (min-width: 900px) {
  .ver-llegar { grid-template-columns: auto auto 1fr; }
  .ver-llegar .henry { height: 100%; aspect-ratio: 4/5; }
  .ver-llegar .lado { height: 100%; overflow: hidden; }
  .ver-llegar .lado .mapa, .ver-llegar .lado .mapa iframe { height: 170px; }
}
@media (max-width: 899px) { .ver-llegar .henry { width: min(340px, 100%); margin-inline: auto; aspect-ratio: 4/5; } }

/* ===== Inicio v4 (22-oct): presencia, dolor, solución; 3 antes y después repartidos ===== */
.portada { position: relative; padding: 0; overflow: hidden; background: var(--negro); }
.portada .wrap { position: relative; display: grid; align-items: center; min-height: calc(100svh - var(--menu)); }
.portada .texto { position: relative; z-index: 2; padding: 48px 0; }
.portada h1 { font-size: clamp(3rem, 7.4vw, 6.4rem); line-height: .95; margin: 14px 0 20px; }
.portada h1 span { display: block; }
.portada .lede { font-size: 1.15rem; }
.retratos { position: absolute; inset: 0 0 0 auto; width: 100%; z-index: 0; overflow: hidden; }
.retratos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; opacity: 0; filter: sepia(.18) saturate(.9) contrast(1.05) brightness(.8); animation: retrato 21s linear infinite; }
.retratos img:nth-child(2) { animation-delay: 7s; } .retratos img:nth-child(3) { animation-delay: 14s; }
@keyframes retrato { 0% { opacity: 0; transform: scale(1.06); } 5% { opacity: 1; } 30% { opacity: 1; } 36% { opacity: 0; } 100% { opacity: 0; transform: scale(1); } }
.retratos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 10 11 / .35), rgb(10 10 11 / .7) 55%, var(--negro)); }
@media (min-width: 900px) {
  .portada .wrap { grid-template-columns: 1.05fr 1fr; }
  .retratos { position: relative; grid-column: 2; grid-row: 1; height: calc(100svh - var(--menu)); width: calc(100% + (100vw - 100%) / 2); margin-right: calc((100% - 100vw) / 2); }
  .portada .texto { grid-column: 1; grid-row: 1; }
  .retratos::after { background: linear-gradient(90deg, var(--negro) 0%, var(--negro) 6%, rgb(10 10 11 / .7) 26%, transparent 58%), linear-gradient(0deg, var(--negro) 0%, transparent 25%); }
}
@media (prefers-reduced-motion: reduce) { .retratos img { animation: none; } .retratos img:first-child { opacity: 1; } }

.confianza { padding: 0; border-block: 1px solid var(--linea); background: var(--carbon); }
.confianza ul { list-style: none; padding: 22px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.confianza li { display: flex; gap: 12px; align-items: center; }
.confianza svg { width: 30px; height: 30px; color: var(--oro); flex: none; }
.confianza b { display: block; font: 400 1.25rem "Anton"; color: var(--oro); text-transform: uppercase; letter-spacing: .02em; }
.confianza span { font-size: .85rem; color: var(--gris); line-height: 1.3; }
@media (min-width: 860px) { .confianza ul { grid-template-columns: repeat(4, 1fr); } }

.cab.centro { text-align: center; justify-items: center; } .cab.centro .eti { justify-content: center; } .cab.centro .lede { margin-inline: auto; }
.dolor { background: radial-gradient(ellipse at 50% 0%, #1d1912, var(--negro) 70%); }
.escenas { display: grid; gap: 18px; }
.escenas article { padding: 26px 24px; border: 1px solid var(--linea); border-radius: 18px; background: rgb(25 23 18 / .6); transition: transform .3s, border-color .3s; }
.escenas article:hover { transform: translateY(-4px); border-color: var(--oro); }
.escenas svg { width: 40px; height: 40px; color: var(--oro); margin-bottom: 14px; }
.escenas h3 { font-size: 1.35rem; margin-bottom: 6px; }
.escenas p { color: #cfc8bc; font-size: .98rem; }
@media (min-width: 760px) { .escenas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .escenas { grid-template-columns: repeat(4, 1fr); } }
/* 23-oct: cinco escenas (entró el trasplante). En PC, 3 arriba y 2 abajo; en tableta, la quinta ocupa la fila entera */
@media (min-width: 760px) and (max-width: 1059px) { .escenas article:nth-child(5) { grid-column: 1 / -1; } .escenas article:nth-child(5) img { aspect-ratio: 16/7; } }
@media (min-width: 1060px) { .escenas { grid-template-columns: repeat(6, 1fr); } .escenas article { grid-column: span 2; } .escenas article:nth-child(n+4) { grid-column: span 3; } .escenas article:nth-child(n+4) img { aspect-ratio: 16/9; } }

.wrap.dos { display: grid; gap: 40px; align-items: center; }
.wrap.dos .caso { width: min(440px, 100%); margin-inline: auto; }
@media (min-width: 900px) { .wrap.dos { grid-template-columns: 1.1fr .9fr; gap: 72px; } .wrap.dos.invertido, .cierre .wrap.dos { grid-template-columns: .9fr 1.1fr; } }
.solucion h2, .cierre h2 { margin: 6px 0 16px; }
.lista-oro { list-style: none; padding: 0; margin-top: 20px; display: grid; gap: 10px; }
.lista-oro li { display: flex; gap: 12px; color: #e6e0d6; } .lista-oro li::before { content: "✓"; color: var(--oro); font-weight: 800; }

.barberia { position: relative; overflow: hidden; text-align: center; }
.barberia > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.38) sepia(.2); }
.barberia .wrap { position: relative; display: grid; justify-items: center; gap: 16px; }
.barberia .eti { justify-content: center; }
.chips-precio { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px 0 10px; }
.chips-precio li { padding: 10px 18px; border: 1px solid var(--linea); border-radius: 999px; background: rgb(10 10 11 / .6); font-weight: 600; }
.chips-precio b { color: var(--oro); margin-left: 6px; }

/* Portada v5 (22-oct): carrusel de 5 fotos de barbería a pantalla completa; la franja de confianza entra en la primera pantalla */
.portada { display: grid; grid-template-rows: 1fr auto; min-height: calc(100svh - var(--menu)); }
.portada .texto { grid-row: 1; align-self: center; position: relative; z-index: 2; padding: 40px 0 32px; max-width: 1120px; }
.portada .texto > * { max-width: 640px; }
.portada h1 { font-size: clamp(2.8rem, 6.6vw, 5.8rem); }
.carrusel { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.carrusel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: saturate(.92) contrast(1.05) brightness(.85); animation: carrusel 30s linear infinite; }
.carrusel img:nth-child(2) { animation-delay: 6s; } .carrusel img:nth-child(3) { animation-delay: 12s; } .carrusel img:nth-child(4) { animation-delay: 18s; } .carrusel img:nth-child(5) { animation-delay: 24s; }
@keyframes carrusel { 0% { opacity: 0; transform: scale(1.08); } 4% { opacity: 1; } 20% { opacity: 1; } 24% { opacity: 0; } 100% { opacity: 0; transform: scale(1); } }
.carrusel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 10 11 / .6), rgb(10 10 11 / .72) 60%, rgb(10 10 11 / .92)); }
@media (min-width: 900px) { .carrusel::after { background: linear-gradient(90deg, rgb(10 10 11 / .92) 0%, rgb(10 10 11 / .7) 40%, rgb(10 10 11 / .2) 75%), linear-gradient(0deg, rgb(10 10 11 / .85) 0%, transparent 30%); } }
.portada .confianza { grid-row: 2; position: relative; z-index: 2; background: rgb(19 18 16 / .82); backdrop-filter: blur(8px); border-bottom: 0; }
.portada .confianza ul { padding: 16px 0; }
@media (prefers-reduced-motion: reduce) { .carrusel img { animation: none; } .carrusel img:first-child { opacity: 1; } }
.portada .wrap { min-height: 0; display: block; }
@media (min-width: 900px) { .portada .wrap { grid-template-columns: none; } }
/* v5: el WhatsApp flotante se muestra al bajar en el inicio; franja compacta de 4 en una fila en el celular; velo más liviano sobre la foto */
.con-portada .flota { opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .3s; }
.con-portada.pasado .flota { opacity: 1; transform: none; pointer-events: auto; }
.flota { transition: opacity .3s, transform .3s; } body.en-cita .flota { opacity: 0; transform: translateY(16px); pointer-events: none; }
@media (max-width: 640px) {
  .portada .confianza ul { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 12px 0; }
  .portada .confianza li { flex-direction: column; text-align: center; gap: 4px; }
  .portada .confianza svg { width: 22px; height: 22px; }
  .portada .confianza b { font-size: .86rem; line-height: 1.1; }
  .portada .confianza span { font-size: .68rem; }
}
@media (min-width: 900px) { .carrusel::after { background: linear-gradient(90deg, rgb(10 10 11 / .9) 0%, rgb(10 10 11 / .6) 38%, rgb(10 10 11 / .08) 78%), linear-gradient(0deg, rgb(10 10 11 / .85) 0%, transparent 30%); } }

/* 22-oct (tarde): precio destacado en la portada, fotos en las escenas del dolor, encuadre sin cortar el cabello */
.precio-portada { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center; margin-top: 22px; padding: 12px 22px 12px 18px; border: 1.5px solid var(--oro); border-radius: 18px; background: rgb(10 10 11 / .55); backdrop-filter: blur(6px); }
.precio-portada span:first-child { grid-column: 1; grid-row: 1; font: 700 .72rem "Inter"; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.precio-portada b { grid-column: 1; grid-row: 2; font: 400 clamp(2.6rem, 4.4vw, 3.4rem) "Anton"; line-height: .95; background: linear-gradient(180deg, var(--oro-claro), var(--oro) 55%, var(--oro-osc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.precio-portada span:last-child { grid-column: 2; grid-row: 1 / 3; font-size: .9rem; color: #e6e0d6; line-height: 1.4; border-left: 1px solid var(--linea); padding-left: 16px; }
.portada .acciones { margin-top: 20px; }
.escenas article { overflow: hidden; padding: 0 0 24px; }
.escenas article img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: grayscale(.35) contrast(1.05) brightness(.85); margin-bottom: 18px; }
.escenas article svg, .escenas article h3, .escenas article p { margin-inline: 22px; }
.escenas article svg { width: 32px; height: 32px; margin-bottom: 8px; }
.carrusel img { object-position: 50% 20%; }
.comp img { object-position: 50% 15%; }
.escenas article img { height: auto; }
.wrap.dos .comp, .comparadores .comp { aspect-ratio: 3/4; } .comp img { object-position: 50% 0%; }
.portada .texto { padding: 28px 0 22px; }
/* pantallas bajas: la franja sigue entrando en la primera pantalla */
@media (max-height: 740px) { .portada h1 { font-size: clamp(2.3rem, 5vw, 4.4rem); margin: 8px 0 12px; } .precio-portada { margin-top: 14px; } .portada .acciones { margin-top: 14px; } }
@media (max-width: 640px) and (max-height: 720px) { .portada .lede { display: none; } .precio-portada span:last-child { font-size: .78rem; } .portada .texto { padding: 16px 0 12px; } .portada .acciones { gap: 8px; } .portada .acciones .btn { min-height: 44px; } }
/* 22-oct (noche): "habla antes que tú." en un solo renglón */
.portada h1 .una-linea { white-space: nowrap; }
.portada .texto > * { max-width: 720px; }
.portada h1 { font-size: clamp(1.9rem, 8.2vw, 4.6rem); }
@media (min-width: 900px) { .portada h1 { font-size: clamp(3rem, 5.2vw, 4.6rem); } }
@media (max-height: 740px) and (min-width: 900px) { .portada h1 { font-size: clamp(2.6rem, 4.6vw, 4rem); } }
#como-funciona h2, .cierre h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }

/* 22-oct (noche, 2): $300 con más fuerza; servicios con gancho y duración explicada; contáctanos con Henry en la esquina y preguntas en dos columnas */
.precio-portada { grid-template-columns: auto 1fr; padding: 14px 24px 14px 20px; box-shadow: 0 0 0 1px rgb(216 180 90 / .25), 0 0 40px rgb(216 180 90 / .18); }
.precio-portada b { position: relative; font-size: clamp(3.2rem, 5.6vw, 4.4rem); background: linear-gradient(110deg, var(--oro-osc) 0%, var(--oro) 30%, #fff6d8 46%, var(--oro-claro) 52%, var(--oro) 70%, var(--oro-osc) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; animation: brillo 3.2s ease-in-out infinite; filter: drop-shadow(0 0 14px rgb(241 217 139 / .45)); }
@keyframes brillo { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0 0; } }
.precio-portada u { text-decoration: none; background: linear-gradient(var(--oro), var(--oro)) 0 100% / 100% 2px no-repeat; padding-bottom: 2px; color: var(--oro-claro); font-weight: 700; }
.precio-portada em { display: block; margin-top: 4px; font-family: "Playfair Display", serif; font-style: italic; color: var(--oro); font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .precio-portada b { animation: none; } }

.duracion { background: var(--carbon); border-block: 1px solid var(--linea); }
.duracion .lista-oro li { align-items: flex-start; } .duracion .lista-oro b { color: var(--crema); }
.consejos { padding: 28px; border: 1px solid var(--oro); border-radius: 20px; background: rgb(10 10 11 / .5); display: grid; gap: 14px; justify-items: start; }

.titulo-fila { align-items: center; }
.henry-mini { margin: 0; display: flex; gap: 14px; align-items: center; padding: 10px 16px 10px 10px; border: 1px solid var(--linea); border-radius: 16px; background: var(--panel); max-width: 360px; }
.henry-mini img { width: 84px; height: 105px; object-fit: cover; object-position: 50% 15%; border-radius: 10px; flex: none; }
.henry-mini figcaption { font-size: .85rem; color: var(--gris); line-height: 1.4; }
.henry-mini b { display: block; font: 700 .72rem "Inter"; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); margin-bottom: 4px; }
@media (min-width: 900px) { .ver-llegar { grid-template-columns: auto 1fr; } .titulo-fila .henry-mini { justify-self: end; } .ver-llegar .lado .mapa, .ver-llegar .lado .mapa iframe { height: 230px; } }

.faq.dos-col { display: grid; gap: 14px; align-items: start; }
.faq-col { display: grid; gap: 14px; }
@media (min-width: 860px) { .faq.dos-col { grid-template-columns: 1fr 1fr; } }
.faq.dos-col { max-width: none; }

/* 23-oct: Henry, grande, entre el video y el mapa (foto profesional de Nano Banana); el texto va sobre un degradado abajo */
.ver-llegar .henry figcaption { left: 0; right: 0; bottom: 0; border-radius: 0; padding: 70px 18px 16px; background: linear-gradient(transparent, rgb(10 10 11 / .94) 55%);
  color: #d9d2c6; font: 500 .9rem/1.4 "Inter"; letter-spacing: 0; text-transform: none; }
.ver-llegar .henry figcaption b { display: block; color: var(--oro); font: 800 .74rem "Inter"; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 4px; }
@media (min-width: 900px) {   /* tres columnas: el alto se calcula para que al mapa y los datos les queden 340 px de ancho */
  .ver-llegar { grid-template-columns: auto auto minmax(340px, 1fr); height: clamp(360px, calc((min(100vw - 64px, 1120px) - 380px) / 1.3625), 600px); }
  .ver-llegar .henry { height: 100%; aspect-ratio: 4/5; } }
@media (max-width: 899px) { .ver-llegar .henry { width: min(420px, 100%); } }

/* 23-oct: la cabecera de Servicios con foto de fondo (manos del barbero), oscurecida hacia la izquierda para que el título se lea */
.pagina-cab.con-foto { position: relative; overflow: hidden; padding: 88px 0 64px; }
.pagina-cab.con-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; filter: brightness(.72) sepia(.15) saturate(.95); }
.pagina-cab.con-foto::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgb(10 10 11 / .9) 0%, rgb(10 10 11 / .6) 42%, rgb(10 10 11 / .05) 100%), linear-gradient(0deg, var(--negro), transparent 35%); }
.pagina-cab.con-foto .wrap { position: relative; z-index: 2; }
@media (max-width: 899px) { .pagina-cab.con-foto > img { object-position: 30% 45%; } .pagina-cab.con-foto::before { background: linear-gradient(0deg, var(--negro) 0%, rgb(10 10 11 / .78) 55%, rgb(10 10 11 / .45) 100%); } }

/* 23-oct: firma de autor discreta (todas las páginas de Sigma la llevan, sin logo) y nota de privacidad del formulario */
footer .firma { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 16px; border-top: 1px solid rgb(216 180 90 / .12); font-size: .76rem; color: #8d877c; }
footer .firma a { color: #b9b2a5; font-weight: 600; } footer .firma a:hover { color: var(--oro); }
.form-cita .privacidad { margin-top: -8px; font-size: .74rem; color: #8d877c; }
/* el cliente afro, paso a paso: antes · con la prótesis · corte y adaptación (24-oct) */
.secuencia { margin: 0 0 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: 18px; overflow: hidden; border: 1px solid var(--linea); background: #000; }
.secuencia div { position: relative; aspect-ratio: 3/4; } .secuencia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.secuencia .tag { position: absolute; top: 12px; left: 12px; padding: 6px 12px; border-radius: 999px; background: rgb(10 10 11 / .85); color: var(--oro); font: 800 .66rem "Inter"; letter-spacing: .18em; text-transform: uppercase; }
.secuencia figcaption { grid-column: 1 / -1; padding: 14px 18px; background: var(--panel); color: var(--gris); font-size: .95rem; }
@media (max-width: 640px) { .secuencia .tag { font-size: .55rem; padding: 4px 8px; top: 8px; left: 8px; letter-spacing: .12em; } }
/* los dos clientes con tres fotos, uno al lado del otro; los casos de dos fotos van debajo (25-oct) */
.secuencias { display: grid; gap: 22px; margin-bottom: 28px; } .secuencias .secuencia { margin: 0; align-content: start; }
@media (min-width: 900px) { .secuencias { grid-template-columns: 1fr 1fr; } .secuencias .tag { font-size: .55rem; padding: 4px 8px; top: 8px; left: 8px; letter-spacing: .12em; } .secuencias figcaption { font-size: .85rem; } }
/* 25-oct: el dorado recortaba las tildes de las mayúsculas ("QUE TÚ" se leía "QUE TU"): el fondo sube un poco más que la letra */
.oro { padding-top: .16em; margin-top: -.16em; }
/* 25-oct: en computadora la portada crece con el alto de la pantalla, para que el texto la llene y no quede una franja vacía sobre la de confianza */
@media (min-width: 900px) and (min-height: 741px) {
  .portada .texto { padding: 3svh 0; }
  .portada .texto > * { max-width: 860px; } .portada .texto > h1 { max-width: none; }
  .portada .eti { font-size: clamp(.8rem, 1.5svh, .95rem); }
  .portada h1 { font-size: clamp(3rem, min(7.6vw, 12svh), 7rem); margin: 2.4svh 0 3svh; }
  .portada .lede { font-size: clamp(1.15rem, 2.4svh, 1.5rem); }
  .precio-portada { margin-top: 4.6svh; padding: 20px 32px 20px 26px; column-gap: 22px; }
  .precio-portada span:first-child { font-size: .82rem; }
  .precio-portada b { font-size: clamp(3.4rem, 9svh, 5.4rem); }
  .precio-portada span:last-child { font-size: clamp(1rem, 1.9svh, 1.15rem); padding-left: 22px; }
  .portada .acciones { margin-top: 4.6svh; gap: 16px; }
  .portada .acciones .btn { min-height: 60px; padding: 0 36px; font-size: 1.1rem; }
}
/* 25-oct: en el celular el título manda (era más chico que el párrafo a la vista) */
@media (max-width: 640px) { .portada h1 { font-size: 9.3vw; margin: 12px 0 16px; } .portada .lede { font-size: 1.02rem; } }
/* 25-oct: las cinco escenas del dolor del mismo tamaño (3 arriba y 2 centradas abajo) y cada fila entra entera en la pantalla */
.escenas article img { aspect-ratio: 16/10; margin-bottom: 16px; }
.escenas article h3 { display: flex; align-items: center; gap: 10px; }
.escenas article h3 svg { width: 26px; height: 26px; margin: 0; flex: none; }
.dolor .cab { margin-bottom: 30px; } .dolor .cab .lede { max-width: 640px; margin-inline: auto; }
@media (min-width: 1060px) {
  .escenas { grid-template-columns: repeat(6, 1fr); gap: 20px; }
  .escenas article, .escenas article:nth-child(n+4) { grid-column: span 2; }
  .escenas article:nth-child(4) { grid-column: 2 / span 2; }
  .escenas article:nth-child(n+4) img { aspect-ratio: 16/10; }
  .escenas p { font-size: .94rem; line-height: 1.5; }
}
/* 25-oct · Servicios: el banner y las tres ventajas en la primera pantalla; los precios empiezan en la segunda */
.arranque { padding: 0; display: grid; grid-template-rows: 1fr auto; }
@media (min-width: 900px) { .arranque { min-height: calc(100svh - var(--menu)); } }
.arranque .pagina-cab.con-foto { display: grid; align-items: center; padding: clamp(40px, 7svh, 88px) 0 clamp(32px, 5svh, 64px); border-bottom: 0; }
.arranque > .wrap { padding-block: 0 clamp(28px, 5svh, 56px); position: relative; z-index: 2; }
.tarjeta h3:has(.icono) { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tarjeta h3 .icono { width: 44px; height: 44px; margin: 0; flex: none; } .tarjeta h3 .icono svg { width: 24px; height: 24px; }
.ventajas .tarjeta { padding: 22px 24px; }
/* galería: las dos secuencias de tres fotos a todo el ancho; los pares de dos en dos (el quinto centrado); los de la barra al final */
.secuencias.grandes { grid-template-columns: 1fr; gap: 28px; }
.secuencias.grandes .secuencia div { aspect-ratio: 4/5; }
.secuencias.grandes .tag { font-size: .7rem; padding: 6px 13px; top: 14px; left: 14px; letter-spacing: .18em; }
.secuencias.grandes figcaption { font-size: .95rem; }
.pares { margin-top: 28px; }
@media (min-width: 760px) { .pares { grid-template-columns: repeat(4, 1fr); gap: 24px; } .pares .par { grid-column: span 2; } .pares .par:last-child:nth-child(odd) { grid-column: 2 / span 2; } }
.eti.desliza { margin: 60px 0 20px; justify-content: center; }
/* cuánto dura: la respuesta grande, debajo de la pregunta */
.duracion .respuesta { font: 400 clamp(1.7rem, 3vw, 2.3rem) "Anton"; text-transform: uppercase; color: var(--crema); margin: 16px 0 4px; letter-spacing: .01em; }
.duracion .respuesta b { color: var(--oro); font-weight: 400; }
.conoce .tarjeta li b { color: var(--crema); }
/* Servicios: menos aire entre secciones; los precios ocupan su propia pantalla, centrados; los consejos tan altos como la columna de al lado */
main:has(.arranque) section:not(.arranque) { padding-block: clamp(48px, 6vw, 72px); }
@media (min-width: 900px) { #protesis { min-height: calc(100svh - var(--menu)); display: grid; align-content: center; padding-block: 32px; } }
.duracion .wrap.dos { align-items: stretch; }
.duracion .consejos { align-content: center; gap: 18px; padding: 36px; } .duracion .consejos li { font-size: 1.05rem; }
#resultados { padding-top: clamp(48px, 6vw, 72px) !important; }
@media (min-width: 900px) {
  #protesis .tarjeta { padding: 36px 36px 34px; } #protesis .tarjeta .precio { font-size: 3.4rem; margin: 14px 0 6px; }
  #protesis .tarjeta p { font-size: 1.06rem; } #protesis .tarjeta ul { gap: 12px; font-size: 1.04rem; margin-top: 20px; } #protesis .tarjeta .btn { margin-top: 28px; min-height: 56px; }
}
@media (max-width: 640px) { .secuencias.grandes .tag { font-size: .5rem; padding: 4px 7px; top: 7px; left: 7px; letter-spacing: .06em; max-width: calc(100% - 14px); line-height: 1.25; } .secuencias.grandes figcaption { font-size: .88rem; } }

/* ==================================================================================================
   25-oct · REGLA DE JONATAN: UNA SECCIÓN = UNA PANTALLA (en computadora).
   Cada sección mide exactamente lo que queda debajo del menú: su contenido entra completo, centrado,
   con el mismo aire arriba y abajo, y no asoma la sección siguiente. Al escrolear, la página se acomoda
   sola al comienzo de cada sección. Lo único que queda debajo de la última pantalla es el pie.
   ================================================================================================== */
@media (min-width: 900px) {
  html { scroll-snap-type: y proximity; scroll-padding-top: var(--menu); }
  main > section, footer { scroll-snap-align: start; }
  main > section:not(.portada):not(.arranque):not(#resultados) { min-height: calc(100svh - var(--menu)); display: grid; align-content: center; padding-block: clamp(24px, 4svh, 44px) !important; }

  /* INICIO · el dolor: las cinco escenas en una fila, todo en una pantalla */
  .dolor .cab { margin-bottom: 3.2svh; } .dolor .cab h2 br { display: none; } .dolor .cab h2 { font-size: clamp(2.4rem, 6svh, 3.6rem); }
  .escenas { grid-template-columns: repeat(5, 1fr) !important; gap: 16px; }
  .escenas article, .escenas article:nth-child(n) { grid-column: auto !important; padding-bottom: 18px; }
  .escenas article img, .escenas article:nth-child(n+4) img { aspect-ratio: 4/3 !important; margin-bottom: 14px; }
  .escenas article h3 { font-size: 1.08rem; line-height: 1.15; margin-bottom: 8px; } .escenas article h3 svg { width: 22px; height: 22px; }
  .escenas article svg, .escenas article h3, .escenas article p { margin-inline: 16px; }
  .escenas p { font-size: .9rem; line-height: 1.5; }
  .pasos li { padding-bottom: 22px; }
  .barberia { align-content: center; }

  /* SERVICIOS · primera pantalla: título arriba y grande, sin hueco entre el texto y las tarjetas */
  .arranque { grid-template-rows: 1fr auto; }
  .arranque .pagina-cab.con-foto { align-items: end; padding: 3svh 0 3.4svh; }
  .arranque .pagina-cab h1 { font-size: clamp(3.2rem, 10svh, 6rem); line-height: .95; }
  .arranque .pagina-cab .eti { font-size: clamp(.78rem, 1.5svh, .95rem); }
  .arranque .pagina-cab .lede { font-size: clamp(1.1rem, 2.4svh, 1.4rem); max-width: 720px; margin-top: 2svh !important; }
  .arranque > .wrap { padding-bottom: 3.4svh; }
  .ventajas .tarjeta { padding: 2.6svh 26px; } .ventajas .tarjeta p { font-size: clamp(.95rem, 1.9svh, 1.08rem); }
  .ventajas .tarjeta h3 { font-size: clamp(1.2rem, 2.6svh, 1.5rem); }

  /* SERVICIOS · resultados: el título y la primera secuencia (3 fotos) entran juntos en una pantalla */
  #resultados { padding-block: 3.4svh 64px !important; }
  #resultados .cab { margin-bottom: 2.6svh; gap: 4px; } #resultados .cab h2 br { display: none; } #resultados .cab h2 { font-size: clamp(2.2rem, 5.6svh, 3.4rem); }
  #resultados .cab .lede { max-width: none; }
  .secuencias.grandes .secuencia div { aspect-ratio: auto; height: calc(100svh - var(--menu) - 3.4svh - 230px); }
  .secuencias.grandes figcaption { padding: 12px 18px; }

  /* SERVICIOS · cuánto dura: la letra llena la pantalla */
  .duracion h2 { font-size: clamp(2.6rem, 6.6svh, 3.9rem); }
  .duracion .respuesta { font-size: clamp(2rem, 4.6svh, 2.9rem); }
  .duracion .lede { font-size: clamp(1.05rem, 2.2svh, 1.3rem); }
  .duracion .lista-oro { gap: 1.6svh; } .duracion .lista-oro li { font-size: clamp(1rem, 2svh, 1.15rem); }
  .duracion .consejos li { font-size: clamp(1.05rem, 2.1svh, 1.2rem); }

  /* SERVICIOS · conoce tu prótesis: título en una línea y las cuatro tarjetas completas */
  .conoce .cab { margin-bottom: 2.4svh; gap: 4px; } .conoce .cab h2 br { display: none; } .conoce .cab h2 { font-size: clamp(2.2rem, 5.4svh, 3.3rem); }
  .conoce .tarjetas { gap: 16px; } .conoce .tarjeta { padding: 18px 24px; }
  .conoce .tarjeta h3 { margin-bottom: 6px; } .conoce .tarjeta h3 .icono { width: 38px; height: 38px; }
  .conoce .tarjeta p { font-size: .93rem; } .conoce .tarjeta ul { margin-top: 8px; gap: 5px; font-size: .9rem; }

  /* SERVICIOS · lista de precios */
  #lista .cab { margin-bottom: 2.4svh; } .precios li { padding: 1.6svh 24px; } .precios li b { font-size: 1.05rem; }

  /* AGENDA (las tres páginas): el formulario completo en una pantalla */
  .cita .caja { align-items: center; }
  .cita h2 { font-size: clamp(2.4rem, 6svh, 3.6rem); }
  .form-cita { gap: 1.4svh; padding: 2.6svh 26px; }
  .form-cita .horas span { height: 40px; }
  .form-cita .btn { min-height: 52px; }

  /* CONTÁCTANOS: la primera pantalla sin recorte y las preguntas en una pantalla */
  .contacto-arriba .titulo-fila h1 { font-size: clamp(2.6rem, 6.4svh, 3.8rem); }
  .contacto-arriba .ver-llegar { height: calc(100svh - var(--menu) - 300px); }
  .contacto-arriba .acciones { margin-top: 2.2svh; }
  #preguntas .cab { margin-bottom: 2.4svh; gap: 4px; } #preguntas .cab h2 br { display: none; } #preguntas .cab h2 { font-size: clamp(2.2rem, 5.4svh, 3.3rem); }
  .faq.dos-col, .faq-col { gap: 1.2svh; } .faq summary { padding-block: 1.7svh; }
}

/* 25-oct · pie de página completo: logo de Henry, dónde está, cómo escribirle, el mapa de la página y la firma */
footer { padding: 56px 0 36px; background: var(--carbon); }
footer .wrap { gap: 36px 28px; }
@media (min-width: 900px) { footer .wrap { grid-template-columns: 1.5fr 1.2fr 1.1fr .8fr; } }
footer h3 { font: 400 1.15rem "Anton"; letter-spacing: .04em; text-transform: uppercase; color: var(--oro); margin-bottom: 12px; }
footer p { margin: 0 0 10px; line-height: 1.6; }
.pie-marca { display: flex; gap: 18px; align-items: flex-start; }
.pie-marca img { width: 96px; height: 96px; flex: none; }
.pie-marca b { display: block; font: 400 2rem/1 "Anton"; letter-spacing: .03em; text-transform: uppercase; }
.pie-marca small { display: block; font: 700 .7rem "Inter"; letter-spacing: .3em; color: var(--oro); margin: 4px 0 10px; }
.pie-redes, .pie-nav { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pie-redes a { display: inline-flex; align-items: center; gap: 10px; color: var(--crema); font-weight: 600; }
.pie-redes svg { width: 20px; height: 20px; color: var(--oro); }
.pie-nav a { color: var(--gris); font-weight: 500; } .pie-nav a:hover, .pie-redes a:hover { color: var(--oro); }
footer .firma { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: .84rem; padding-top: 22px; margin-top: 4px; }
footer .firma a { font-weight: 700; }
@media (min-width: 900px) {
  .cita h2 { font-size: clamp(2.2rem, 5.2svh, 3.2rem); } .cita .caja > div:first-child .lede { margin-top: 1svh; }
  .form-cita { gap: 1svh; padding: 2.2svh 24px; } .form-cita .campo legend { margin-bottom: .6svh; } .form-cita .dias { padding-bottom: 2px; }
  .contacto-arriba .ver-llegar { height: calc(100svh - var(--menu) - 320px); }
  .arranque .pagina-cab.con-foto { align-items: center; padding: 4svh 0 2svh; }
  .arranque .pagina-cab h1 { font-size: clamp(3.2rem, 11.4svh, 6.6rem); }
  .arranque .pagina-cab .lede { font-size: clamp(1.15rem, 2.7svh, 1.55rem); }
  .ventajas .tarjeta { padding: 3.2svh 28px; } .ventajas .tarjeta p { font-size: clamp(1rem, 2.1svh, 1.15rem); line-height: 1.55; }
  .barberia h2 { font-size: clamp(3rem, 9svh, 5.4rem); } .barberia .chips-precio { font-size: 1.15rem; } .barberia .wrap { gap: 3svh; }
}
@media (min-width: 900px) {
  .duracion .respuesta { font-size: clamp(1.7rem, 3.7svh, 2.4rem); white-space: nowrap; }
  .escenas article img, .escenas article:nth-child(n+4) img { aspect-ratio: 1/1 !important; }
  .escenas p { font-size: .94rem; }
  .secuencias.grandes { gap: 48px; }
  .secuencias.grandes .secuencia div { height: calc(100svh - var(--menu) - 3.4svh - 240px); }
  .contacto-arriba .titulo-fila .lede { max-width: none; }
  .ver-llegar .lado { grid-template-rows: 1fr auto auto auto; overflow: visible; }
  .ver-llegar .lado .mapa, .ver-llegar .lado .mapa iframe { height: 100% !important; min-height: 120px; }
}
@media (min-width: 900px) {
  .ver-llegar .lado { gap: 10px; } .ver-llegar .lado .dato { padding: 10px 12px; } .ver-llegar .lado .dato span { font-size: .86rem; line-height: 1.4; }
  .ver-llegar .lado .mapa, .ver-llegar .lado .mapa iframe { min-height: 90px; }
}
@media (max-width: 899px) { footer { padding-bottom: 110px; } }

/* ==================================================================================================
   25-oct (noche) · PANTALLAS BAJAS. La laptop de Jonatan muestra ~1351 × 640 (572 px debajo del menú).
   Todo lo de "una sección = una pantalla" se mide en svh para que entre igual en 572 px que en 900.
   ================================================================================================== */
@media (min-width: 900px) {
  main > section:not(.portada):not(.arranque):not(#resultados) { padding-block: clamp(14px, 3.4svh, 40px) !important; }
  h2 { font-size: clamp(1.9rem, 6.2svh, 3.4rem); }

  /* dolor: foto de alto fijo según la pantalla, texto que se achica en pantallas bajas */
  .dolor .cab { margin-bottom: 2.4svh; gap: 2px; } .dolor .cab h2 { font-size: clamp(1.9rem, 6svh, 3.4rem); } .dolor .cab .lede { font-size: clamp(.95rem, 2.2svh, 1.15rem); }
  .escenas article img, .escenas article:nth-child(n+4) img { aspect-ratio: auto !important; height: 22svh; margin-bottom: 1.6svh; }
  .escenas article { padding-bottom: 1.8svh; }
  .escenas article h3 { font-size: clamp(.92rem, 2.1svh, 1.1rem); margin-bottom: .8svh; }
  .escenas p { font-size: clamp(.78rem, 1.95svh, .95rem); line-height: 1.45; }

  /* antes y después al lado del texto: la foto nunca más alta que la pantalla */
  .wrap.dos .caso { width: min(440px, 100%, calc((100svh - var(--menu) - 8svh - 44px) * .75)); }
  .caso figcaption { margin-top: 1svh; }
  .solucion .lede, .cierre .lede { font-size: clamp(1rem, 2.3svh, 1.2rem); }
  .lista-oro { gap: 1.2svh; margin-top: 2svh; } .lista-oro li { font-size: clamp(.92rem, 2.1svh, 1.05rem); }
  .solucion .acciones, .cierre .acciones { margin-top: 3svh; }
  #como-funciona h2, .cierre h2 { font-size: clamp(1.6rem, 5svh, 2.9rem); }
  .pasos li { padding-bottom: 2.6svh; grid-template-columns: 46px 1fr; } .pasos li::before { width: 44px; height: 44px; }
  .pasos li:not(:last-child)::after { left: 21.5px; top: 44px; }
  .pasos b { font-size: clamp(.98rem, 2.3svh, 1.12rem); } .pasos span { font-size: clamp(.86rem, 2svh, 1rem); }
  #como-funciona .cab { margin-bottom: 3svh; }

  /* agenda: horas en 6 columnas, días y campos más bajos */
  .cita .caja { grid-template-columns: .75fr 1.25fr; gap: 56px; }
  .cita h2 { font-size: clamp(1.9rem, 6svh, 3.2rem); }
  .cita .caja > div:first-child .lede { font-size: clamp(.95rem, 2.2svh, 1.1rem); }
  .form-cita { gap: 1.1svh; padding: 2svh 22px; }
  .form-cita select, .form-cita input:not([type=radio]) { min-height: 0; height: clamp(38px, 6.4svh, 50px); padding-block: 0; }
  .form-cita .horas { grid-template-columns: repeat(6, 1fr); gap: 6px; } .form-cita .horas span { height: clamp(30px, 5.2svh, 40px); font-size: .86rem; }
  .form-cita .dias label span, .form-cita .dias span { padding-block: .6svh; }
  .form-cita .detalle-servicio { margin-top: -.4svh; font-size: .78rem; }
  .form-cita .btn { min-height: clamp(40px, 7svh, 52px); }
  .form-cita .estado, .form-cita .privacidad { font-size: .72rem; margin: 0; }

  /* Servicios · precios: ícono al lado del título y letra según el alto */
  #protesis .tarjeta { padding: 3svh 32px; }
  #protesis .tarjeta > .icono { display: none; }
  #protesis .tarjeta h2 { font-size: clamp(1.5rem, 4.4svh, 2rem) !important; }
  #protesis .tarjeta .precio { font-size: clamp(2.2rem, 6.4svh, 3.4rem); margin: 1svh 0 .6svh; }
  #protesis .tarjeta p { font-size: clamp(.88rem, 2svh, 1.06rem); }
  #protesis .tarjeta ul { gap: 1svh; font-size: clamp(.86rem, 1.95svh, 1.04rem); margin-top: 1.8svh; }
  #protesis .tarjeta .btn { margin-top: 2.6svh; min-height: clamp(42px, 7svh, 56px); }

  /* Servicios · conoce tu prótesis: cuatro tarjetas en una fila */
  .conoce .tarjetas { grid-template-columns: repeat(4, 1fr) !important; gap: 14px; }
  .conoce .tarjeta { padding: 2.2svh 18px; }
  .conoce .tarjeta h3 { font-size: clamp(1rem, 2.4svh, 1.2rem); } .conoce .tarjeta h3 .icono { width: 34px; height: 34px; }
  .conoce .tarjeta p { font-size: clamp(.8rem, 1.9svh, .93rem); }
  .conoce .tarjeta ul { font-size: clamp(.78rem, 1.85svh, .9rem); gap: .6svh; margin-top: 1svh; }
  .conoce .cab .lede { font-size: clamp(.92rem, 2.1svh, 1.1rem); }

  /* Servicios · lista */
  #lista .cab { margin-bottom: 2svh; } .precios li { padding: 1.1svh 24px; } .precios li em { font-size: clamp(1.2rem, 3.2svh, 1.5rem); }
  #lista .nota { margin-top: 1.2svh; }

  /* Servicios · resultados: título compacto */
  #resultados .cab h2 { font-size: clamp(1.8rem, 5.4svh, 3.4rem); }
  .secuencias.grandes .secuencia div { height: calc(100svh - var(--menu) - 3.4svh - 22svh - 60px); }
  #resultados .cab .lede { font-size: clamp(.92rem, 2.1svh, 1.1rem); }

  /* Servicios · cuánto dura */
  .duracion h2 { font-size: clamp(1.9rem, 6.2svh, 3.9rem); }
  .duracion .respuesta { margin: 1.4svh 0 .4svh; }

  /* Contáctanos: el video, Henry y el mapa se ajustan al alto que queda */
  .contacto-arriba .titulo-fila h1 { font-size: clamp(2rem, 6svh, 3.8rem); margin: 0; }
  .contacto-arriba .titulo-fila .eti { margin-bottom: .8svh; } .contacto-arriba .titulo-fila .lede { margin-top: .4svh; font-size: clamp(.92rem, 2.1svh, 1.1rem); }
  .contacto-arriba .wrap { display: grid; gap: 2svh; }
  .contacto-arriba .ver-llegar { height: calc(100svh - var(--menu) - 6.8svh - 4svh - 6svh - 2.2svh - 2.1svh - 50px - 4svh - 34px); margin: 0; }
  .contacto-arriba .acciones { margin-top: 0; } .contacto-arriba .acciones .btn { min-height: clamp(40px, 6.4svh, 50px); }
  .ver-llegar .lado .dato span { font-size: clamp(.76rem, 1.8svh, .86rem); } .ver-llegar .lado .dato b { font-size: .66rem; }
  #preguntas .cab h2 { font-size: clamp(1.8rem, 5.4svh, 3.3rem); }
  .faq summary { padding-block: clamp(8px, 1.5svh, 16px); font-size: clamp(.88rem, 2svh, 1rem); }
}
/* la trampa contra robots no ocupa lugar en el formulario (ocupaba 41 px de alto) */
.form-cita .trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 900px) {
  .conoce .cab .lede { max-width: none; } .conoce .cab { margin-bottom: 1.8svh; }
  .contacto-arriba .ver-llegar { height: calc(100svh - var(--menu) - 6.8svh - 4svh - 6svh - 2.2svh - 2.1svh - 50px - 4svh - 46px); }
}
@media (min-width: 900px) {
  .form-cita { gap: .8svh; }
  .form-cita .dia { width: 58px; padding: .7svh 0; gap: 0; } .form-cita .dia b { font-size: clamp(1.1rem, 3svh, 1.5rem); } .form-cita .dia small { font-size: .62rem; }
  .form-cita .dias { padding-bottom: 4px; }
  .form-cita label { gap: .5svh; } .form-cita .fila { gap: 12px; }
  .form-cita .campo legend { margin-bottom: .4svh; }
}
/* Contáctanos: los botones suben a la fila del título; el video, Henry y el mapa usan exactamente el alto que queda */
.contacto-arriba .titulo-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 28px; }
@media (min-width: 900px) {
  .contacto-arriba .wrap { display: flex; flex-direction: column; gap: 2.4svh; height: calc(100svh - var(--menu) - 2 * clamp(14px, 3.4svh, 40px)); }
  .contacto-arriba .ver-llegar { flex: 1; min-height: 0; height: auto !important; grid-template-rows: 100%; }
  .ver-llegar > * { min-height: 0; }
  .ver-llegar .tel, .ver-llegar .henry, .ver-llegar .lado { height: 100%; }
  .ver-llegar .tel video { height: 100%; width: auto; display: block; }
  .ver-llegar .lado { gap: 1.2svh; } .ver-llegar .lado .dato { padding: 1.2svh 12px; }
}
/* 25-oct: las fotos de las secuencias siempre en su forma (3:4), nunca recortadas por arriba ni por abajo:
   el alto lo da la pantalla y el ancho sale solo; la secuencia queda centrada */
@media (min-width: 900px) {
  .secuencias.grandes .secuencia { grid-template-columns: repeat(3, auto); justify-content: center; width: fit-content; max-width: 100%; margin-inline: auto; }
  .secuencias.grandes .secuencia div { aspect-ratio: 3/4 !important; width: auto; height: calc(100svh - var(--menu) - 3.4svh - 22svh - 60px); }
  .secuencias.grandes .secuencia img { object-fit: cover; object-position: 50% 50%; }
}
.secuencia img, .comp img, .par img { object-position: 50% 50%; }
.secuencias.grandes .secuencia div { aspect-ratio: 3/4; }
/* 25-oct · regla de Jonatan: el subrayado del menú es una línea que crece de izquierda a derecha al pasar el mouse (antes era un borde que aparecía de golpe) */
nav a { position: relative; border-bottom: 0 !important; }
nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
nav a:hover::after, nav a:focus-visible::after, nav a[aria-current]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { nav a::after { transition: none; } }

/* 25-oct · CELULAR Y TABLETA (Jonatan revisa el celular recién con la página publicada: aquí no se desconfigura nada)
   · ningún texto de menos de 12 px · la agenda no se sale de lado en el celular chico (360 px) */
.form-cita fieldset, .form-cita label { min-width: 0; }
.form-cita select { width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
@media (max-width: 899px) {
  .eti { font-size: .8rem; }
  .precio-portada span:first-child { font-size: .78rem; }
  .portada .confianza span { font-size: .76rem; }
  .comp .tag, .par .tag { font-size: .76rem; letter-spacing: .12em; }
  .secuencias.grandes .tag, .secuencia .tag { font-size: .75rem !important; letter-spacing: .04em !important; padding: 4px 8px !important; }
  .etiqueta { font-size: .76rem; }
  .dia small { font-size: .76rem; }
  .form-cita .pequeno, .form-cita .estado, .form-cita .privacidad { font-size: .8rem; }
}
/* tableta acostada (1024 × 700): las cinco escenas y las cuatro tarjetas son más angostas, la letra baja un punto */
@media (min-width: 900px) and (max-width: 1100px) {
  .escenas p { font-size: clamp(.76rem, 1.8svh, .88rem); }
  .conoce .tarjeta p { font-size: clamp(.76rem, 1.75svh, .88rem); } .conoce .tarjeta ul { font-size: clamp(.74rem, 1.7svh, .86rem); }
}


/* 28-oct: secuencia de CUATRO fotos (antes, prótesis, colocada, corte): cuatro columnas en pantalla ancha, 2 × 2 en celular; cada foto en su forma 3:4, sin recortes */
.secuencias.grandes .secuencia.cuatro { grid-template-columns: repeat(4, 1fr); }
.secuencias.grandes .secuencia.cuatro div { aspect-ratio: 3/4; height: auto; }
@media (max-width: 640px) { .secuencias.grandes .secuencia.cuatro { grid-template-columns: repeat(2, 1fr); } }

/* 29-oct: la firma de Sigma con su logo, como la firma de un artista (canje: sin pago, la página también lleva gente a Sigma) */
footer .firma { align-items: center; }
footer .firma .autor { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
footer .firma .autor img { width: 40px; height: 40px; flex: none; opacity: .9; transition: transform .35s ease, opacity .35s ease; }
footer .firma .autor span { display: flex; flex-direction: column; line-height: 1.15; }
footer .firma .autor small { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #8d877c; font-weight: 600; }
footer .firma .autor b { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.05rem; color: #c9ab62; }
footer .firma .autor:hover img { transform: rotate(-8deg) scale(1.06); opacity: 1; }
footer .firma .autor:hover b { color: #f0d58a; }
@media (max-width: 640px) { footer .firma .autor { margin-top: 6px; } }

/* 29-oct: las secuencias de 3 fotos nunca más anchas que la página (en pantallas altas se cortaba la primera foto: "TES" en vez de "ANTES") */
@media (min-width: 900px) { .secuencias.grandes .secuencia:not(.cuatro) div { height: min(calc(100svh - var(--menu) - 3.4svh - 22svh - 60px), calc((min(1120px, 100vw - 48px) - 10px) / 3 * 4 / 3)); } }
@media (min-width: 900px) { .secuencias.grandes .secuencia.cuatro { width: 100%; max-width: 100%; } }
/* 29-oct: en pantallas altas la foto de Henry crecía con el alto y se montaba sobre el mapa y los datos.
   El alto de la fila queda limitado por el ancho: video + foto + 400 px para la columna derecha y los espacios */
@media (min-width: 900px) {
  .contacto-arriba .ver-llegar { max-height: calc((min(1120px, 100vw - 32px) - 400px) / 1.3625); }
  .contacto-arriba .wrap { justify-content: center; }
}