/* Cangrejo Editores · landings B2B (mayoristas y colegios)
   Sistema: blanco y negro con rojo Pantone 3517 C (#c20022) en los detalles (26-sep-2026). Archivo para todo, Bodoni Moda cursiva para el remate. */

:root {
  --papel: #f4f3f1;
  --crema: #ffffff;
  --arena: #e9e7e3;
  --tinta: #141313;
  --rojo: #c20022;
  --rojo-osc: #8e0019;
  --rojo-claro: #ff5a70;
  --durazno: #f5d3d8;
  --gris: #767370;
  --gris-2: #45423f;
  --verde: #141313;
  --linea: rgba(20, 19, 19, .12);
  --sombra-suave: 0 20px 40px -24px rgba(20, 19, 19, .35);
  --radio: 26px;
  --radio-s: 14px;
  --ancho: 1280px;
  --lado: clamp(16px, 5vw, 72px);
  --it: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--rojo-osc); text-decoration: none; }
a:hover { color: var(--rojo); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
p { margin: 0; }
::selection { background: var(--durazno); }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; border-radius: 6px; }

.it { font-family: var(--it); font-style: italic; font-weight: 500; letter-spacing: -.02em; }
.rojo { color: var(--rojo); }
.marco { width: min(var(--ancho), 100% - 2 * var(--lado)); margin-inline: auto; }
.kicker { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo); }
.kicker.claro { color: var(--rojo-claro); }
.t1 { font-size: clamp(40px, 6.4vw, 92px); line-height: .95; letter-spacing: -.045em; text-wrap: balance; }
.t2 { font-size: clamp(32px, 4.4vw, 60px); letter-spacing: -.04em; text-wrap: balance; }
.t3 { font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -.03em; line-height: 1.05; }
.lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--gris-2); }
.nota { font-size: 13px; color: var(--gris); }
.pc { display: none !important; }
[data-confirmar] { text-decoration: underline dotted rgba(194, 0, 34, .55); text-decoration-thickness: 2px; text-underline-offset: .14em; cursor: help; }

/* ── Botones ── */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 8px 8px 26px; border-radius: 999px; background: var(--rojo); color: var(--crema); font-size: 17px; font-weight: 700; white-space: nowrap; box-shadow: 0 14px 30px -12px rgba(194, 0, 34, .6); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background .25s; min-height: 60px; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(194, 0, 34, .75); color: var(--crema); background: #a8001e; }
.btn:active { transform: translateY(0); }
.btn .flecha { width: 44px; height: 44px; border-radius: 999px; background: var(--crema); color: var(--rojo); display: grid; place-items: center; flex: none; transition: transform .25s; }
.btn:hover .flecha { transform: translateX(3px); }
.btn.oscuro { background: var(--tinta); box-shadow: none; }
.btn.oscuro:hover { background: #2b2a29; }
.btn.oscuro .flecha { color: var(--tinta); }
.btn.claro { background: var(--crema); color: var(--tinta); box-shadow: none; }
.btn.claro:hover { background: #fff; color: var(--tinta); }
.btn.claro .flecha { background: var(--rojo); color: var(--crema); }
.btn.verde { background: var(--verde); box-shadow: 0 14px 30px -12px rgba(20, 19, 19, .6); }
.btn.verde:hover { background: #2b2a29; }
.btn.verde .flecha { color: var(--verde); }
.btn.linea { background: transparent; color: var(--tinta); border: 1.5px solid rgba(20, 19, 19, .25); box-shadow: none; padding: 8px 26px; }
.btn.linea:hover { border-color: var(--tinta); background: rgba(20, 19, 19, .04); color: var(--tinta); }
.btn.linea.claro { color: var(--crema); border-color: rgba(255, 255, 255, .4); background: transparent; }
.btn.linea.claro:hover { border-color: var(--crema); background: rgba(255, 255, 255, .1); color: var(--crema); }
.btn.chico { min-height: 44px; font-size: 15px; padding: 5px 5px 5px 20px; }
.btn.chico .flecha { width: 34px; height: 34px; }
.btn.chico.linea { padding: 5px 20px; }
.btn.lleno { width: 100%; }
.btn svg { width: 18px; height: 18px; }

/* ── Chips y pestañas ── */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--durazno); color: var(--rojo-osc); font-size: 13px; font-weight: 700; }
.pestanas { display: flex; flex-wrap: wrap; gap: 8px; }
.pestana { padding: 10px 18px; border-radius: 999px; border: 1.5px solid rgba(20, 19, 19, .16); font-size: 14px; font-weight: 600; color: var(--gris-2); background: transparent; transition: background .2s, color .2s, border-color .2s; }
.pestana:hover { border-color: var(--tinta); color: var(--tinta); }
.pestana.activa { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
.pestana small { font-weight: 500; opacity: .7; margin-left: 4px; }

/* ── Barra superior de captura ── */
.barra-top { background: var(--tinta); color: var(--crema); }
.barra-top .marco { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 9px 0; }
.barra-top p { font-size: 14px; color: #d4d2cf; }
.barra-top b { color: var(--crema); }
.barra-top form { display: flex; gap: 8px; }
.barra-top input { height: 40px; width: 220px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .12); color: var(--crema); padding: 0 16px; font-size: 14px; }
.barra-top input::placeholder { color: #a9a6a2; }
.barra-top button { height: 40px; padding: 0 18px; border-radius: 999px; background: var(--rojo); color: var(--crema); font-size: 14px; font-weight: 700; }
.barra-top.roja { background: var(--rojo); }
.barra-top.roja p { color: #ffe3e7; }
.barra-top.roja input { background: rgba(255, 255, 255, .2); }
.barra-top.roja input::placeholder { color: #ffd9de; }
.barra-top.roja button { background: var(--tinta); }

/* ── Navegación ── */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(244, 243, 241, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav.pegada { border-bottom-color: var(--linea); }
.nav-fila { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 82px; }
.logo { display: flex; align-items: center; gap: 12px; color: var(--tinta); }
.logo img { height: 52px; width: auto; }
.logo span { display: flex; flex-direction: column; line-height: 1.1; }
.logo b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.logo small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.nav-links { display: flex; gap: 30px; font-size: 15px; font-weight: 500; }
.nav-links a { color: var(--gris-2); position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--rojo); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav-links a:hover { color: var(--tinta); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.otra { color: var(--rojo-osc); font-weight: 700; }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.hamb { display: none; width: 46px; height: 46px; border-radius: 999px; background: var(--crema); border: 1px solid var(--linea); place-items: center; }
.menu-movil { display: none; }

/* ── Banda de ventas (grande, arriba) ── */
.banda-ventas { background: var(--tinta); color: var(--crema); position: relative; overflow: hidden; }
.banda-ventas::before { content: ""; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.banda-ventas .marco { display: grid; grid-template-columns: 1.1fr 1.3fr auto; gap: 32px; align-items: center; padding: 26px 0; position: relative; }
.banda-ventas .titulo { display: flex; flex-direction: column; gap: 6px; }
.banda-ventas .titulo .kicker { color: var(--rojo-claro); }
.banda-ventas h2 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.03em; line-height: 1.05; }
.banda-ventas .datos { display: flex; flex-direction: column; gap: 10px; }
.banda-ventas .tel { display: flex; align-items: center; gap: 14px; color: var(--crema); font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.banda-ventas .tel svg { width: 34px; height: 34px; flex: none; }
.banda-ventas .tel:hover { color: #fff; }
.banda-ventas .lineas { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; color: #d4d2cf; }
.banda-ventas .lineas a { color: #d4d2cf; text-decoration: underline; text-underline-offset: 3px; }
.banda-ventas .lineas a:hover { color: #fff; }
.banda-ventas .acciones { display: flex; flex-direction: column; gap: 10px; }
.banda-ventas .acciones .btn { width: 100%; }

/* ── Hero ── */
.hero .marco { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; padding: 56px 0 44px; }
.hero-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-cifras { display: flex; align-items: center; gap: 24px; padding-top: 22px; border-top: 1px solid var(--linea); width: 100%; margin-top: 6px; }
.hero-cifras div { display: flex; flex-direction: column; gap: 2px; }
.hero-cifras b { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.hero-cifras span { font-size: 13px; color: var(--gris); }
.hero-cifras i { width: 1px; height: 40px; background: var(--linea); }

/* ── Formularios ── */
.tarjeta-form { background: var(--crema); border-radius: 32px; padding: 32px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 40px 80px -40px rgba(20, 19, 19, .4); border: 1px solid rgba(20, 19, 19, .06); }
.tarjeta-form h3 { font-size: 24px; letter-spacing: -.02em; }
.tarjeta-form .sub { font-size: 15px; color: var(--gris); margin-bottom: 4px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 14px; font-weight: 600; }
.campo label small { font-weight: 400; color: var(--gris); }
.inp { height: 54px; width: 100%; border-radius: var(--radio-s); background: var(--papel); border: 2px solid transparent; padding: 0 18px; font-size: 16px; transition: border-color .2s, background .2s; }
.inp::placeholder { color: #9b9894; }
.inp:focus { outline: 0; border-color: var(--rojo); background: var(--crema); }
textarea.inp { height: auto; min-height: 96px; padding: 14px 18px; resize: vertical; }
select.inp { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238a7f76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.segmento { display: grid; gap: 6px; padding: 6px; border-radius: 16px; background: var(--papel); }
.segmento label { position: relative; }
.segmento input { position: absolute; opacity: 0; inset: 0; }
.segmento span { display: block; padding: 11px 8px; border-radius: 11px; text-align: center; font-size: 14px; font-weight: 600; color: var(--gris-2); cursor: pointer; transition: background .2s, color .2s; }
.segmento input:checked + span { background: var(--tinta); color: var(--crema); font-weight: 700; }
.segmento input:focus-visible + span { outline: 2px solid var(--rojo); }
.chips-form { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-form label { position: relative; }
.chips-form input { position: absolute; opacity: 0; inset: 0; }
.chips-form span { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid rgba(20, 19, 19, .16); font-size: 14px; font-weight: 600; color: var(--gris-2); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chips-form input:checked + span { background: var(--rojo); border-color: var(--rojo); color: var(--crema); }
.chips-form input:focus-visible + span { outline: 2px solid var(--rojo); outline-offset: 2px; }
.acepto { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--gris-2); }
.acepto input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--tinta); flex: none; }
.form-ok { display: none; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; border-radius: 20px; background: #f1f0ee; color: #141313; }
.form-ok b { font-size: 20px; }
form.enviado .form-campos { display: none; }
form.enviado .form-ok { display: flex; }

/* ── Cinta de libros animada ── */
.cinta { background: #fff; padding: 36px 0 44px; overflow: hidden; border-block: 1px solid var(--linea); }
.cinta-cab { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.cinta-cab p { font-size: 15px; color: var(--gris-2); }
@media (hover: none), (max-width: 720px) { .cinta-cab p { display: none; } }
.cinta-fila { display: flex; width: max-content; gap: 22px; animation: cinta 70s linear infinite; will-change: transform; }
.cinta-fila + .cinta-fila { margin-top: 22px; animation-direction: reverse; animation-duration: 84s; }
.cinta-fila:hover { animation-play-state: paused; }
.cinta-pista { display: flex; align-items: center; gap: 22px; padding-right: 22px; }
.cinta-item { display: flex; flex-direction: column; align-items: center; gap: 10px; width: max-content; }
.cinta-item .libro { height: 168px; }
.cinta-item .libro.ancho { height: 130px; }
.cinta-item span { font-size: 12px; font-weight: 600; color: var(--gris); width: 0; min-width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cinta-cat { display: flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 999px; background: var(--tinta); color: var(--crema); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ── Mockup de libro ── */
.libro { position: relative; display: block; flex: none; isolation: isolate; aspect-ratio: var(--r, .72); height: 100%; }
.libro.ancho { height: auto; width: 100%; }
.libro img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }
.libro.mock { border-radius: 3px 7px 7px 3px; box-shadow: 0 22px 32px -16px rgba(20, 19, 19, .55), 0 3px 6px rgba(20, 19, 19, .12); }
.libro.mock img { border-radius: inherit; }
.libro.mock::before { content: ""; position: absolute; top: 3%; bottom: 3%; right: -6px; width: 8px; z-index: 0; border-radius: 0 3px 3px 0; background: repeating-linear-gradient(90deg, #ffffff 0 1px, #dcdad6 1px 2px); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.libro.mock::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .3) 0, rgba(255, 255, 255, .38) 3%, rgba(0, 0, 0, .18) 5%, rgba(0, 0, 0, 0) 9.5%), linear-gradient(115deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 42%); }
.libro.plano { background: #fff; border-radius: 12px; padding: 6%; box-shadow: 0 16px 30px -18px rgba(20, 19, 19, .35), 0 0 0 1px rgba(20, 19, 19, .05); }
.libro.plano img { object-fit: contain; }

/* En fondos blancos la foto irregular va sin tarjeta: el blanco de la foto se funde con el fondo */
.blanca .libro.plano, .cinta .libro.plano, .visor-caja .libro.plano { background: transparent; box-shadow: none; padding: 0; }

/* ── Secciones ── */
.seccion { padding: clamp(56px, 7vw, 96px) 0; }
.seccion-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.seccion-cab > div { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.oscura { background: var(--tinta); color: var(--crema); }
.oscura .lead { color: #d4d2cf; }
.oscura .pestana { color: #d4d2cf; border-color: rgba(255, 255, 255, .25); }
.oscura .pestana:hover { color: var(--crema); border-color: var(--crema); }
.oscura .pestana.activa { background: var(--crema); color: var(--tinta); border-color: var(--crema); }
.blanca { background: #fff; }

/* Catálogo */
.grilla-libros { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
.tarjeta-libro { display: flex; flex-direction: column; gap: 14px; text-align: left; padding: 0; background: transparent; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.tarjeta-libro:hover { transform: translateY(-6px); }
.tarjeta-libro .vitrina { height: 230px; display: flex; align-items: center; justify-content: center; padding: 14px 18px; border-radius: 20px; background: #fff; border: 1px solid var(--linea); transition: border-color .3s; }
.tarjeta-libro:hover .vitrina { border-color: rgba(20, 19, 19, .3); }
.oscura .tarjeta-libro .vitrina { background: rgba(255, 255, 255, .07); }
.tarjeta-libro .vitrina .libro.ancho { width: calc(100% - 8px); }
.tarjeta-libro .texto { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.tarjeta-libro b { font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.tarjeta-libro small { font-size: 12px; color: var(--gris); }
.oscura .tarjeta-libro small { color: #a9a6a2; }
.catalogo-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; padding: 16px 16px 16px 28px; border-radius: 999px; background: rgba(20, 19, 19, .05); }
.oscura .catalogo-pie { background: rgba(255, 255, 255, .08); }
.catalogo-pie p { font-size: 16px; }
.catalogo-pie .acciones { display: flex; flex-wrap: wrap; gap: 10px; }

/* Visor de un libro */
.visor { border: 0; padding: 0; background: transparent; max-width: min(960px, 92vw); width: 100%; }
.visor::backdrop { background: rgba(20, 19, 19, .7); backdrop-filter: blur(6px); }
.visor-caja { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: var(--crema); border-radius: 32px; padding: 40px; }
.visor-caja .vitrina { display: flex; align-items: center; justify-content: center; min-height: 380px; }
.visor-caja .libro { height: 380px; }
.visor-caja .libro.ancho { height: auto; width: 100%; }
.visor-caja .info { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.visor-caja h3 { font-size: 30px; letter-spacing: -.03em; }
.visor-caja .isbn { font-size: 13px; color: var(--gris); letter-spacing: .06em; }
.cerrar { position: absolute; right: 18px; top: 18px; width: 42px; height: 42px; border-radius: 999px; background: var(--papel); display: grid; place-items: center; }
.cerrar:hover { background: var(--durazno); }

/* Márgenes / precios */
.escalones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; }
.escalon { background: var(--crema); border-radius: var(--radio); padding: 30px; display: flex; flex-direction: column; gap: 14px; border: 1px solid rgba(20, 19, 19, .06); min-height: 250px; }
.escalon .desde { font-size: 15px; font-weight: 600; color: var(--gris); }
.escalon .pct { white-space: nowrap; font-size: clamp(48px, 4.8vw, 68px); font-weight: 800; letter-spacing: -.05em; line-height: 1; margin-top: auto; }
.escalon .que { font-size: 15px; color: var(--gris-2); }
.escalon.fuerte { background: var(--rojo); color: var(--crema); box-shadow: 0 30px 50px -24px rgba(194, 0, 34, .7); min-height: 300px; }
.escalon.fuerte .desde { color: #ffd9de; }
.escalon.fuerte .que { color: #ffe8eb; }
.escalon.noche { background: var(--tinta); color: var(--crema); min-height: 300px; }
.escalon.noche .desde { color: #a9a6a2; }
.escalon .btn { white-space: normal; text-align: left; font-size: 15px; line-height: 1.15; }
.dos-col { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.dos-col > div:first-child { display: flex; flex-direction: column; gap: 18px; }

/* Pasos */
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linea); }
.paso { padding: 30px 30px 0 0; display: flex; flex-direction: column; gap: 10px; }
.paso + .paso { padding-left: 30px; border-left: 1px solid var(--linea); }
.paso .num { font-family: var(--it); font-style: italic; font-size: 54px; line-height: 1; color: var(--rojo); }
.paso b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.paso p { font-size: 16px; color: var(--gris-2); }

/* Por qué (colegios) */
.razones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.razon { background: var(--crema); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.razon .num { font-family: var(--it); font-style: italic; font-size: 44px; line-height: 1; color: var(--rojo); }
.razon b { font-size: 20px; font-weight: 700; }
.razon p { font-size: 15px; color: var(--gris-2); }
.razon.noche { background: var(--tinta); color: var(--crema); }
.razon.noche .num { color: var(--rojo-claro); }
.razon.noche p { color: #d4d2cf; }

/* Librería */
.libreria { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: stretch; }
.libreria .foto-grande { position: relative; border-radius: 32px; overflow: hidden; min-height: 520px; }
.libreria .foto-grande img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.libreria .foto-grande:hover img { transform: scale(1.03); }
.libreria .sello { position: absolute; left: 24px; bottom: 24px; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 999px; background: var(--crema); box-shadow: var(--sombra-suave); font-size: 14px; font-weight: 700; }
.libreria .sello i { width: 36px; height: 36px; border-radius: 999px; background: var(--rojo); display: grid; place-items: center; color: var(--crema); }
.libreria .sello i svg { width: 18px; height: 18px; }
.libreria .lado { display: flex; flex-direction: column; gap: 22px; }
.libreria .lado .texto { display: flex; flex-direction: column; gap: 14px; }
.libreria .direccion { background: var(--crema); border-radius: 24px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; border: 1px solid rgba(20, 19, 19, .06); }
.libreria .direccion .fila { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; }
.libreria .direccion .fila svg { width: 20px; height: 20px; flex: none; color: var(--rojo); margin-top: 2px; }
.libreria .direccion .fila b { display: block; font-size: 16px; }
.libreria .direccion .fila span { color: var(--gris-2); }
.libreria .mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.libreria .mini div { border-radius: 18px; overflow: hidden; aspect-ratio: 1; }
.libreria .mini img { width: 100%; height: 100%; object-fit: cover; }

/* Cierre con formulario */
.cierre { background: var(--tinta); color: var(--crema); border-radius: 40px; padding: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
.cierre.noche { background: var(--tinta); }
.cierre .texto { display: flex; flex-direction: column; gap: 18px; }
.cierre .texto p { color: #d4d2cf; font-size: 18px; }
.cierre.noche .texto p { color: #d4d2cf; }
.cierre .contacto-mini { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, .12); color: var(--crema); }
.cierre .contacto-mini i { width: 46px; height: 46px; border-radius: 14px; background: var(--rojo); display: grid; place-items: center; flex: none; }
.cierre .contacto-mini i svg { width: 22px; height: 22px; }
.cierre .contacto-mini small { display: block; font-size: 13px; opacity: .8; }
.cierre .contacto-mini b { font-size: 17px; }
.cierre form { background: var(--crema); color: var(--tinta); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }

/* Footer */
.pie { padding: 40px 0; border-top: 1px solid var(--linea); }
.pie .marco { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; font-size: 14px; color: var(--gris); }
.pie .logo img { height: 40px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 20px; }
.pie a { color: var(--gris-2); }

/* Flotantes */
.wa-flot { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 20px 10px 10px; border-radius: 999px; background: var(--verde); color: var(--crema); font-weight: 700; font-size: 15px; box-shadow: 0 16px 30px -10px rgba(20, 19, 19, .7); transition: transform .25s; }
.wa-flot:hover { transform: translateY(-2px); color: var(--crema); }
.wa-flot i { width: 44px; height: 44px; border-radius: 999px; background: rgba(255, 255, 255, .18); display: grid; place-items: center; }
.wa-flot i svg { width: 24px; height: 24px; }
.barra-movil { display: none; }

/* Ventana emergente */
.popup { border: 0; padding: 0; background: transparent; width: min(920px, 94vw); }
.popup::backdrop { background: rgba(20, 19, 19, .72); backdrop-filter: blur(6px); }
.popup-caja { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--crema); border-radius: 36px; overflow: hidden; box-shadow: 0 60px 120px -30px rgba(0, 0, 0, .6); }
.popup-caja > *, .visor-caja > * { min-width: 0; }
.popup-arte { background: var(--tinta); color: var(--crema); padding: 36px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 480px; }
.popup-arte .chip { background: var(--crema); color: var(--rojo); align-self: flex-start; }
.popup-arte h3 { font-size: clamp(30px, 3vw, 40px); letter-spacing: -.035em; }
.popup-libros { display: flex; align-items: flex-end; justify-content: center; gap: 0; padding: 10px 0 20px; margin: 0 -26px; }
.popup-libros .libro { height: 122px; margin-left: -22px; transition: transform .3s; box-shadow: 0 30px 40px -18px rgba(0, 0, 0, .55); }
.popup-libros .libro:first-child { margin-left: 0; }
.popup-libros .libro:nth-child(odd) { transform: rotate(-4deg) translateY(6px); }
.popup-libros .libro:nth-child(even) { transform: rotate(3deg); }
.popup-libros:hover .libro { transform: none; }
.popup-form { padding: 40px; display: flex; flex-direction: column; gap: 12px; }
.popup-form h3 { font-size: 28px; letter-spacing: -.025em; line-height: 1.1; margin-top: 10px; }
.popup-form .sub { font-size: 15px; color: var(--gris); margin-bottom: 6px; }
.popup-form .no { align-self: center; font-size: 14px; color: var(--gris); margin-top: 6px; }
.popup-form .no:hover { color: var(--tinta); }

/* Reveal */
.rev { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); }
.rev.visto { opacity: 1; transform: none; }
.rev.d1 { transition-delay: .1s; } .rev.d2 { transition-delay: .2s; } .rev.d3 { transition-delay: .3s; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .grilla-libros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .banda-ventas .marco { grid-template-columns: 1fr 1fr; }
  .banda-ventas .titulo { grid-column: 1 / -1; }
  .razones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-links { gap: 20px; font-size: 14px; }
}
@media (max-width: 900px) {
  .nav-links, .nav-cta .btn { display: none; }
  .hamb { display: grid; }
  .menu-movil { display: none; flex-direction: column; gap: 4px; padding: 10px 0 18px; border-top: 1px solid var(--linea); }
  .menu-movil.abierto { display: flex; }
  .menu-movil a { padding: 12px 4px; font-size: 17px; font-weight: 600; color: var(--tinta); border-bottom: 1px solid var(--linea); }
  .menu-movil a.otra { color: var(--rojo-osc); }
  .hero .marco { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; }
  .dos-col, .libreria, .cierre { grid-template-columns: 1fr; }
  .libreria .foto-grande { min-height: 340px; }
  .escalones { grid-template-columns: 1fr; }
  .escalon, .escalon.fuerte, .escalon.noche { min-height: 0; }
  .escalon .pct { margin-top: 6px; }
  .pasos { grid-template-columns: 1fr; }
  .paso + .paso { padding-left: 0; border-left: 0; border-top: 1px solid var(--linea); }
  .paso { padding-right: 0; }
  .seccion-cab { flex-direction: column; align-items: flex-start; }
  .visor-caja, .popup-caja { grid-template-columns: 1fr; }
  .popup-arte { min-height: 0; padding: 28px; }
  .popup-libros .libro { height: 96px; margin-left: -16px; }
  .popup-libros { margin: 0 -10px; }
  .barra-top { display: none; }
}
@media (max-width: 720px) {
  .grilla-libros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tarjeta-libro .vitrina { height: 190px; padding: 12px; }
  .banda-ventas .marco { grid-template-columns: 1fr; gap: 18px; padding: 22px 0; }
  .banda-ventas .acciones { flex-direction: row; flex-wrap: wrap; }
  .banda-ventas .acciones .btn { width: auto; flex: 1; min-width: 200px; }
  .hero-cifras { gap: 14px; flex-wrap: wrap; }
  .hero-cifras b { font-size: 26px; }
  .tarjeta-form { padding: 22px; border-radius: 26px; }
  .dos { grid-template-columns: 1fr; }
  .segmento { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .razones { grid-template-columns: 1fr; }
  .libreria .mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cierre { border-radius: 28px; }
  .cierre form { padding: 20px; }
  .wa-flot { display: none; }
  .barra-movil { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: grid; grid-template-columns: 1fr 58px; gap: 8px; }
  .barra-movil .btn { min-height: 58px; justify-content: center; padding: 8px 20px; }
  .barra-movil .wa { height: 58px; border-radius: 999px; background: var(--verde); color: var(--crema); display: grid; place-items: center; box-shadow: 0 16px 30px -10px rgba(20, 19, 19, .6); }
  .barra-movil .wa svg { width: 24px; height: 24px; }
  body { padding-bottom: 84px; }
  .cinta-item .libro { height: 150px; }
  .cinta-item .libro.ancho { height: 112px; }
  .visor-caja { padding: 24px; }
  .visor-caja .libro { height: 260px; }
  .popup-form { padding: 24px; }
}
@media (max-width: 420px) {
  .hero-cta .btn { width: 100%; }
  .pie .marco { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cinta-fila { animation: none; }
  .cinta { overflow-x: auto; }
  .rev { opacity: 1; transform: none; transition: none; }
  .btn, .tarjeta-libro, .libreria .foto-grande img { transition: none; }
}

/* ── 26-sep-2026 · ajustes del cliente ─────────────────────────────────── */
/* Rojo solo en detalles: los kicker van en negro con un punto rojo */
.kicker { color: var(--tinta); display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); flex: none; }
.banda-ventas .titulo .kicker, .oscura .kicker, .cierre .kicker { color: var(--crema); }
/* Términos y condiciones bajo los descuentos */
.terminos { margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--gris-2); border-left: 3px solid var(--rojo); padding-left: 14px; }
.terminos b { color: var(--tinta); }
.sin-iva { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 16px; border-radius: 999px; background: var(--tinta); color: var(--crema); font-size: 14px; font-weight: 700; }
.sin-iva::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo-claro); }
/* Cuatro pasos */
.pasos.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .pasos.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pasos.cuatro { grid-template-columns: 1fr; } }
/* Dos sedes en la sección de librería */
.direccion .fila small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rojo); margin-bottom: 2px; }
/* Foto de la fachada: letrero siempre visible; en celular la foto vertical */
.libreria .foto-grande img { object-position: center 30%; }
/* Por dónde te contactamos (chips) */
.chips-form.contacto { display: flex; flex-wrap: wrap; gap: 8px; }
/* Botón secundario de sellos */
.catalogo-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.hero-cifras b.mas::before { content: "+"; }
.sin-iva { align-self: flex-start; width: fit-content; }
.acepto a { color: var(--rojo-osc); text-decoration: underline; }

/* ── Página de términos y datos personales (27-sep-2026) ── */
.legal { background: var(--crema); }
.legal-marco { max-width: 780px; display: flex; flex-direction: column; gap: 22px; }
.legal .vigente { font-size: 14px; color: var(--gris); }
.legal .indice { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 6px 20px; padding: 20px 24px; border: 1px solid var(--linea); border-radius: var(--radio-s); background: var(--papel); font-size: 15px; }
.legal .indice a { color: var(--tinta); }
.legal .indice a:hover { color: var(--rojo); }
.legal section { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--linea); scroll-margin-top: 100px; }
.legal h2 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.02em; line-height: 1.15; }
.legal p, .legal li { font-size: 17px; line-height: 1.6; color: var(--gris-2); }
.legal b { color: var(--tinta); }
.legal ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.legal li::marker { color: var(--rojo); }
.legal a { color: var(--rojo-osc); text-decoration: underline; text-underline-offset: 3px; }
.legal .plazos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.legal .plazos > div { padding: 18px 20px; border-radius: var(--radio-s); background: var(--tinta); color: var(--crema); }
.legal .plazos b { color: var(--crema); }
.legal .plazos p { color: #d4d2cf; font-size: 15px; margin-top: 6px; }
/* popup: nunca más alto que la pantalla; en celular la franja negra se reduce */
.popup { max-height: 92dvh; overflow: auto; border-radius: 36px; }
@media (max-width: 720px) {
  .popup-arte { min-height: 0; padding: 22px 24px; gap: 10px; }
  .popup-arte .popup-libros { display: none; }
  .popup-arte h3 { font-size: 26px; }
}

/* ── Escalones de beneficios: escalera real y animada (27-sep-2026) ── */
.escalones { align-items: end; gap: 14px; border-bottom: 3px solid var(--tinta); }
.escalones .escalon { border-radius: var(--radio) var(--radio) 0 0; border-bottom: 0; transform-origin: 50% 100%; justify-content: flex-start; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.escalones .escalon:nth-child(1) { min-height: 250px; }
.escalones .escalon:nth-child(2) { min-height: 340px; }
.escalones .escalon:nth-child(3) { min-height: 430px; }
.escalones .escalon .pct { font-variant-numeric: tabular-nums; }
.escalones .escalon .nivel { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.escalones .escalon:hover { transform: translateY(-6px); }
/* entrada: cada escalón crece desde el piso, uno tras otro, y luego aparece su texto */
.escalones .escalon.rev { opacity: 1; transform: scaleY(0); transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.escalones .escalon.rev.visto { transform: scaleY(1); }
.escalones .escalon.rev:nth-child(1) { transition-delay: 0s; }
.escalones .escalon.rev:nth-child(2) { transition-delay: .22s; }
.escalones .escalon.rev:nth-child(3) { transition-delay: .44s; }
.escalones .escalon.rev > * { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.escalones .escalon.rev.visto > * { opacity: 1; transform: none; }
.escalones .escalon.rev.visto:nth-child(1) > * { transition-delay: .55s; }
.escalones .escalon.rev.visto:nth-child(2) > * { transition-delay: .77s; }
.escalones .escalon.rev.visto:nth-child(3) > * { transition-delay: .99s; }
.escalones .escalon.rev.visto:hover { transform: translateY(-6px); transition-delay: 0s; }
@media (max-width: 980px) {
  .escalones { border-bottom: 0; gap: 12px; }
  .escalones .escalon { border-radius: var(--radio); min-height: 0 !important; }
  .escalones .escalon:nth-child(1) { margin-right: 24%; }
  .escalones .escalon:nth-child(2) { margin-right: 12%; }
  .escalones .escalon.rev { transform: scaleX(0); transform-origin: 0 50%; }
  .escalones .escalon.rev.visto { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .escalones .escalon.rev, .escalones .escalon.rev > * { transform: none !important; opacity: 1 !important; transition: none !important; }
}
.escalones .escalon.fuerte { box-shadow: none; }
.escalones .escalon .btn { font-size: 14px; padding-left: 18px; gap: 10px; }

/* ── Botón flotante de WhatsApp: verde y logo de WhatsApp, se mueve cada 6 s (27-sep-2026) ── */
.wa-flot { background: #25d366; color: #fff; box-shadow: 0 16px 30px -10px rgba(37, 211, 102, .65); animation: wa-llama 6s ease-in-out 3s infinite; }
.wa-flot:hover { color: #fff; background: #1ebe5a; animation-play-state: paused; }
.wa-flot i { background: rgba(255, 255, 255, .22); position: relative; }
.wa-flot i::after { content: ""; position: absolute; inset: 0; border-radius: 999px; border: 2px solid #fff; opacity: 0; animation: wa-onda 6s ease-out 3s infinite; }
.wa-flot i svg { width: 26px; height: 26px; }
@media (max-width: 720px) {
  .barra-movil .wa { background: #25d366; color: #fff; box-shadow: 0 16px 30px -10px rgba(37, 211, 102, .6); animation: wa-llama 6s ease-in-out 3s infinite; }
  .barra-movil .wa svg { width: 28px; height: 28px; }
}
@keyframes wa-llama {
  0%, 84%, 100% { transform: none; }
  86% { transform: translateY(-4px) rotate(-6deg); }
  88% { transform: translateY(-4px) rotate(6deg); }
  90% { transform: translateY(-4px) rotate(-5deg); }
  92% { transform: translateY(-2px) rotate(4deg); }
  94% { transform: none; }
}
@keyframes wa-onda {
  0%, 84% { opacity: 0; transform: scale(1); }
  86% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}
@media (prefers-reduced-motion: reduce) {
  .wa-flot, .wa-flot i::after, .barra-movil .wa { animation: none; }
}

/* ── Botones de WhatsApp: pequeños, bordeados en verde WhatsApp (27-sep-2026) ── */
.btn.verde { background: transparent; color: #128c4a; border: 2px solid #25d366; box-shadow: none; min-height: 50px; font-size: 15px; padding: 5px 5px 5px 20px; gap: 12px; }
.btn.verde:hover { background: rgba(37, 211, 102, .1); color: #0f7a40; box-shadow: none; }
.btn.verde .flecha { width: 38px; height: 38px; background: #25d366; color: #fff; }
.btn.verde .flecha svg { width: 20px; height: 20px; }
.banda-ventas .btn.verde, .cierre .btn.verde, .oscura .btn.verde, .popup-arte .btn.verde { color: #25d366; }
.banda-ventas .btn.verde:hover, .cierre .btn.verde:hover { color: #5ee08e; background: rgba(37, 211, 102, .12); }
.banda-ventas .acciones .btn.verde { width: auto; align-self: flex-end; }
.banda-ventas .tel svg, .cierre .contacto-mini svg { color: #25d366; }
.cierre .contacto-mini i { background: transparent; border: 2px solid #25d366; }

/* ── Banner hacia la tienda en línea (27-sep-2026) ── */
.banner-tienda-sec { padding-block: 8px 40px; background: var(--papel); }
.banner-tienda { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 26px 32px; border-radius: var(--radio); background: var(--tinta); color: var(--crema); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.banner-tienda:hover { color: var(--crema); transform: translateY(-3px); }
.banner-tienda .bt-texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.banner-tienda .kicker { color: var(--crema); }
.banner-tienda b { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.03em; line-height: 1.1; }
.banner-tienda small { font-size: 15px; color: #d4d2cf; }
.banner-tienda .bt-ir { display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 22px; border-radius: 999px; background: var(--crema); color: var(--tinta); font-weight: 700; font-size: 16px; white-space: nowrap; }
.banner-tienda .bt-ir .flecha { width: 40px; height: 40px; border-radius: 999px; background: var(--rojo); color: var(--crema); display: grid; place-items: center; }
.banner-tienda .bt-ir .flecha svg { width: 18px; height: 18px; }
.banner-tienda:hover .bt-ir .flecha { transform: translateX(3px); transition: transform .25s; }

/* ── Flotante de WhatsApp más pequeño y con movimiento más suave y espaciado ── */
.wa-flot { padding: 6px 16px 6px 6px; gap: 9px; font-size: 13.5px; right: 20px; bottom: 20px; animation: wa-llama 12s ease-in-out 4s infinite; }
.wa-flot i { width: 36px; height: 36px; }
.wa-flot i svg { width: 21px; height: 21px; }
.wa-flot i::after { animation: wa-onda 12s ease-out 4s infinite; }
@media (max-width: 720px) {
  .barra-movil .wa { animation: wa-llama 12s ease-in-out 4s infinite; }
  .barra-movil .wa svg { width: 24px; height: 24px; }
}
@keyframes wa-llama {
  0%, 90%, 100% { transform: none; }
  91.5% { transform: translateY(-2px) rotate(-3deg); }
  93% { transform: translateY(-2px) rotate(3deg); }
  94.5% { transform: translateY(-1px) rotate(-2deg); }
  96% { transform: none; }
}
@keyframes wa-onda {
  0%, 90% { opacity: 0; transform: scale(1); }
  91.5% { opacity: .7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}
/* menú en una sola línea aunque tenga más opciones */
.nav-links a, .logo span b { white-space: nowrap; }
@media (max-width: 1240px) { .nav-links { gap: 18px; } .nav-links a { font-size: 14.5px; } }
@media (max-width: 1240px) { .nav-links a[href="#libreria"], .nav-links a[href="#como"], .nav-links a[href="#porque"] { display: none; } }

/* ── Librería: fachada nueva (horizontal 2:1) a todo lo ancho, completa (27-sep-2026) ── */
.libreria { grid-template-columns: 1fr; gap: 28px; }
.libreria .foto-grande { min-height: 0; aspect-ratio: 1800 / 893; }
.libreria .foto-grande img { object-position: center; }
.libreria .lado { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; align-items: start; }
.libreria .lado .mini { grid-column: 1 / -1; }
.libreria .lado .mini div { aspect-ratio: 16 / 9; }
@media (max-width: 980px) {
  .libreria .foto-grande { min-height: 0; border-radius: 20px; }
  .libreria .lado { grid-template-columns: 1fr; }
  .libreria .lado .mini div { aspect-ratio: 1; }
  .libreria .sello { left: 12px; bottom: 12px; font-size: 12px; padding: 8px 12px 8px 8px; }
  .libreria .sello i { width: 28px; height: 28px; }
}
@media (max-width: 720px) { .libreria .sello { display: none; } }