/* Hedone Agency — Agencia. «La cara seria» (docs/05-BRIEF-DISENO.md):
   fondo crema, texto casi negro cálido y UN solo acento, burdeos apagado, que se
   usa en botones, enlaces y la cursiva de los titulares. Se carga después de base.css. */

:root {
  --text:#1E1A17; --text-strong:#141210;
  --accent:#8C4F54; --accent-strong:#7A4548; --accent-soft:#8C4F54;
  --btn-bg:#8C4F54; --btn-fg:#F5EEE0; --btn-hover:#7A4548;
  --shadow:rgba(30,26,23,0.10);
}
h1,h2,h3 { color:var(--text-strong); }
.btn-pink { background:var(--accent); color:var(--cream); }
.btn-pink:hover { background:var(--accent-strong); }
.nav-cta { background:var(--accent); }
.cta-box-in { background:#1E1A17; }
.cta-box-in h2 em { color:#D89A9E; }
.cta-box-in .kicker { color:#D89A9E; } .cta-box-in .kicker::before { background:#D89A9E; }
.serv .num { color:var(--accent); }
.codigo-col.si { background:var(--bg-2); border:1px solid var(--border); }
.codigo-col.no { background:#1E1A17; }
.codigo-col.no h3 { color:#F5EEE0; }
.codigo-col.no li::before { color:#D89A9E; }

/* Comparativa "sola / con nosotros" */
.cifras { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:36px; }
@media (max-width:760px){ .cifras{ grid-template-columns:1fr; } }
.cifra { border-radius:18px; padding:32px 28px; border:1px solid var(--border); background:var(--bg-2); }
.cifra.con { background:#1E1A17; color:var(--cream); border-color:transparent; }
.cifra h3 { font-size:22px; margin-bottom:18px; }
.cifra.con h3 { color:var(--cream); }
.cifra.con h3 em { color:#D89A9E; }
.cifra dl { display:grid; gap:10px; font-size:15px; }
.cifra dl > div { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.cifra dt { opacity:0.85; }
.cifra dd { font-family:'Fraunces',serif; font-size:19px; text-align:right; white-space:nowrap; }
.cifra .total { border-top:1px solid var(--border); margin-top:8px; padding-top:14px; }
.cifra.con .total { border-top-color:rgba(245,238,224,0.15); }
.cifra .total strong { font-family:'Fraunces',serif; font-size:30px; font-weight:400; color:var(--accent); }
.cifra.con .total strong { color:#D89A9E; }
.cifra .pie { font-size:12.5px; opacity:0.82; margin-top:14px; line-height:1.5; }

/* Paquetes (servicios) */
.paquetes { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px; }
@media (max-width:900px){ .paquetes{ grid-template-columns:1fr; } }
.paquete { background:var(--bg-2); border:1px solid var(--border); border-radius:18px; padding:32px 28px; display:flex; flex-direction:column; }
.paquete .anexo { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; font-weight:800; color:var(--accent-strong); margin-bottom:12px; }
.paquete h3 { font-size:24px; margin-bottom:6px; }
.paquete .precio { font-family:'Fraunces',serif; font-size:44px; font-weight:300; color:var(--text-strong); line-height:1; margin:14px 0 4px; }
.paquete .precio small { font-family:'Nunito',sans-serif; font-size:13px; opacity:0.85; }
.paquete .para { font-size:14px; opacity:0.85; margin-bottom:18px; font-style:italic; }
.paquete ul { list-style:none; margin-bottom:22px; flex:1; }
.paquete li { padding:8px 0 8px 24px; position:relative; font-size:16px; line-height:1.5; border-bottom:1px solid var(--border); }
.paquete li:last-child { border-bottom:none; }
.paquete li::before { content:'✓'; position:absolute; left:0; top:8px; color:var(--accent); font-weight:800; }
.paquete .salida { font-size:14.5px; opacity:0.88; background:var(--surface); border-radius:10px; padding:12px 14px; line-height:1.55; }
.paquete .salida strong { font-weight:800; }
.paquete.destacado { border:2px solid var(--accent); }

/* Bloque "por qué nosotros" */
.porque { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:36px; }
@media (max-width:760px){ .porque{ grid-template-columns:1fr; } }
.porque .serv h3 { font-size:21px; }

/* ===== Landing larga de /agencia (2026-09-17) ===== */
.hero-ag { position:relative; min-height:clamp(520px, 82vh, 760px); display:flex; align-items:center; overflow:hidden; background:#1E1A17; color:var(--cream); }
.hero-ag .medio { position:absolute; inset:0; }
.hero-ag .medio img, .hero-ag .medio video, .hero-ag .medio svg, .hero-ag .medio picture { width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; }
.hero-ag .velo { position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,26,23,0.66) 0%, rgba(30,26,23,0.72) 45%, rgba(30,26,23,0.88) 100%); }
.hero-ag .hero-in { position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:96px 28px 72px; width:100%; }
.hero-ag .kicker { color:#E8B4B8; } .hero-ag .kicker::before { background:#E8B4B8; }
.hero-ag h1 { color:var(--cream); font-size:clamp(40px,6.4vw,84px); font-weight:300; letter-spacing:-0.035em; line-height:1; margin:22px 0 20px; max-width:14ch; }
.hero-ag h1 em { color:#E8B4B8; }
.hero-ag p.sub { font-size:clamp(17px,1.5vw,20px); max-width:58ch; opacity:0.92; line-height:1.6; margin-bottom:30px; }
.hero-ag .hero-ctas { justify-content:flex-start; }
.hero-ag .btn-dark { background:var(--cream); color:#1E1A17; } .hero-ag .btn-dark:hover { background:#fff; }
.hero-ag .btn-line { color:var(--cream); border-color:rgba(245,238,224,0.45); } .hero-ag .btn-line:hover { background:rgba(245,238,224,0.08); border-color:var(--cream); }
.ticks { display:flex; gap:22px; flex-wrap:wrap; margin-top:30px; font-size:15px; opacity:0.95; }
.ticks span::before { content:'✓'; color:#E8B4B8; font-weight:800; margin-right:8px; }
@media (max-width:520px){ .hero-ag{ min-height:0; } .hero-ag .hero-in{ padding:64px 20px 48px; } .hero-ag .hero-ctas .btn{ width:100%; justify-content:center; } }

.cifras-barra { background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cifras-barra .in { max-width:1180px; margin:0 auto; padding:26px 28px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:760px){ .cifras-barra .in{ grid-template-columns:1fr 1fr; } }
.cifra-item strong { display:block; font-family:'Nunito',sans-serif; font-weight:800; font-size:clamp(34px,3.8vw,52px); letter-spacing:-0.02em; color:var(--accent); line-height:1; }
.cifra-item span { font-size:14.5px; opacity:0.85; display:block; margin-top:6px; }

.perfiles { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px; }
@media (max-width:860px){ .perfiles{ grid-template-columns:1fr; } }
.perfil { background:var(--bg-2); border:1px solid var(--border); border-radius:18px; padding:30px 28px; }
.perfil h3 { font-size:24px; margin-bottom:10px; }
.perfil p { font-size:16px; opacity:0.88; line-height:1.6; }

.pilares { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:36px; }
@media (max-width:1000px){ .pilares{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pilares{ grid-template-columns:1fr; } }
.pilar { background:var(--bg-2); border:1px solid var(--border); border-radius:18px; padding:28px 26px; }
.pilar .icono { width:44px; height:44px; color:var(--accent); margin-bottom:16px; }
.pilar .icono svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.pilar h3 { font-size:21px; margin-bottom:8px; }
.pilar p { font-size:15.5px; opacity:0.88; line-height:1.6; }

.porque-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; }
@media (max-width:900px){ .porque-cards{ grid-template-columns:1fr; } }
.porque-card { background:var(--bg-2); border:1px solid var(--border); border-radius:16px; padding:24px 24px; }
.porque-card h3 { font-size:19px; margin-bottom:8px; }
.porque-card h3::before { content:'✓'; color:var(--accent); font-weight:800; margin-right:10px; font-family:'Nunito',sans-serif; }
.porque-card p { font-size:15.5px; opacity:0.88; line-height:1.55; }

.compara { margin-top:36px; }
.compara .tabla th:nth-child(2), .compara .tabla td:nth-child(2) { color:var(--text-strong); font-weight:600; background:rgba(140,79,84,0.06); }
.compara .tabla td:nth-child(3) { opacity:0.8; }
.compara .tabla th { font-size:12px; }

/* Tres tarjetas, no cuatro: la cuarta (escena con el estudio) salió en el lote 11 y
   la rejilla se quedó en repeat(4,1fr), que las dejaba estrechas y pegadas al borde
   izquierdo con un hueco a la derecha. Corregido el 2026-09-20. */
.planes {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px;
  max-width:1140px; margin-inline:auto; align-items:stretch;
}
@media (max-width:1000px){ .planes{ grid-template-columns:1fr; max-width:560px; } }
.plan {
  background:var(--bg-2); border:1px solid var(--border); border-radius:18px;
  padding:40px 34px; display:flex; flex-direction:column; height:100%;
}
.plan.destacado { border:2px solid var(--accent); }
.plan .para { font-size:14px; opacity:0.8; font-style:italic; margin-bottom:12px; }
.plan .tramos { font-size:13.5px; line-height:1.5; opacity:0.9; margin:-4px 0 12px; padding:8px 10px; background:var(--surface); border-radius:8px; }
.plan .tramos strong { font-family:'Fraunces',serif; font-weight:400; font-size:17px; }
.plan .precio { font-family:'Fraunces',serif; font-weight:300; font-size:38px; line-height:1; margin:6px 0 14px; color:var(--text-strong); }
.plan .precio small { display:block; margin-top:8px; font-family:'Nunito',sans-serif; font-size:13px; line-height:1.4; opacity:0.75; }
.plan h3 { font-size:24px; margin-bottom:4px; }
.plan h4 { font-family:'Nunito',sans-serif; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; font-weight:800; color:var(--accent-strong); margin:8px 0 6px; }
.plan ul { list-style:none; margin-bottom:12px; flex:1; }
.plan li { padding:7px 0 7px 24px; position:relative; font-size:15.5px; line-height:1.5; }
.plan li::before { content:'✓'; position:absolute; left:0; top:6px; color:var(--accent); font-weight:800; }
.plan .nota-plan { font-size:13px; line-height:1.45; opacity:0.75; margin:0; padding-top:14px; margin-top:auto; border-top:1px solid var(--border); }
.nota-planes { text-align:center; font-size:15px; opacity:0.85; margin-top:22px; }


.proceso { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:36px; }
@media (max-width:1000px){ .proceso{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .proceso{ grid-template-columns:1fr; } }
.paso { background:var(--bg-2); border:1px solid var(--border); border-radius:18px; padding:28px 24px; }
.paso .n { font-family:'Fraunces',serif; font-style:italic; font-size:36px; color:var(--accent); line-height:1; margin-bottom:12px; display:block; }
.paso h3 { font-size:20px; margin-bottom:8px; }
.paso p { font-size:15.5px; opacity:0.88; line-height:1.55; }

/* Por qué existe Hedone: bloque destacado a ancho completo, sin tarjeta ni imagen */
.porque-existe { padding-top:72px; padding-bottom:72px; }
.landing .section.alt.porque-existe > .porque-existe-in { max-width:62ch; margin:0 auto; text-align:center; padding-left:28px; padding-right:28px; }
.porque-existe-in .kicker { margin-bottom:18px; }
.porque-existe-in .kicker::after { content:''; width:26px; height:1px; background:var(--accent-strong); }
.porque-existe-in h2 { font-size:clamp(34px,4.6vw,56px); font-weight:300; margin-bottom:26px; }
.porque-existe-in p { font-size:clamp(17px,1.45vw,19px); line-height:1.75; opacity:0.92; margin:0 auto 18px; }
.porque-existe-in p:last-child { margin-bottom:0; }
@media (max-width:520px){ .porque-existe{ padding-top:48px; padding-bottom:48px; } .porque-existe-in p{ text-align:left; } }

.seguridad { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px; }
@media (max-width:760px){ .seguridad{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .seguridad{ grid-template-columns:1fr; } }
.seg { background:var(--bg-2); border:1px solid var(--border); border-radius:14px; padding:18px 18px; font-size:15px; }
.seg strong { display:block; font-family:'Fraunces',serif; font-weight:400; font-size:19px; margin-bottom:4px; }
.seg-enlaces { margin-top:18px; font-size:14px; text-align:center; opacity:0.9; }

.testimonios { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; }
@media (max-width:900px){ .testimonios{ grid-template-columns:1fr; } }
.testimonio { background:var(--bg-2); border:1px solid var(--border); border-radius:18px; padding:26px; }
.testimonio blockquote { font-family:'Fraunces',serif; font-size:20px; line-height:1.35; margin-bottom:14px; }
.testimonio .quien-dice { font-size:14px; opacity:0.8; }
.testimonio .captura { margin-top:14px; border-radius:10px; overflow:hidden; filter:blur(3px); }

.landing .section { padding-top:64px; padding-bottom:16px; }
.landing .section-title p.lead { margin:14px auto 0; text-align:center; }
.landing .form-wrap { padding-top:8px; }
@media (max-width:520px){ .landing .section{ padding-top:44px; } }


/* ===== Pase v6 (2026-09-17): fotos, alternancia, presencia, botones repetidos, animaciones ===== */
.pilar { padding:0; overflow:hidden; }
.pilar-foto { aspect-ratio:16/10; background:#2A2320; }
.pilar-foto img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.pilar:hover .pilar-foto img { transform:scale(1.03); }
.pilar-body { padding:22px 24px 26px; }

.landing .section.alt { background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); max-width:none; padding-left:0; padding-right:0; }
.landing .section.alt > * { max-width:1280px; margin-left:auto; margin-right:auto; padding-left:28px; padding-right:28px; }
.landing .section.alt .pilares, .landing .section.alt .proceso, .landing .section.alt .codigo-cols, .landing .section.alt .compara { margin-top:36px; }
.landing .section.alt .perfil, .landing .section.alt .pilar, .landing .section.alt .paso, .landing .section.alt .plan { background:var(--bg); }
@media (max-width:520px){ .landing .section.alt > * { padding-left:20px; padding-right:20px; } }

.perfil, .pilar, .porque-card, .plan, .paso, .seg { box-shadow:0 1px 2px rgba(30,26,23,0.04), 0 10px 30px rgba(30,26,23,0.06); transition:transform .25s ease, box-shadow .25s ease; }
.perfil:hover, .pilar:hover, .porque-card:hover, .plan:hover, .paso:hover { transform:translateY(-3px); box-shadow:0 2px 4px rgba(30,26,23,0.05), 0 18px 44px rgba(30,26,23,0.10); }

.compara.tabla-wrap { background:#1E1A17; color:var(--cream); border-radius:20px; padding:10px 18px 14px; }
.compara .tabla { margin-top:0; }
.compara .tabla th, .compara .tabla td { border-bottom:1px solid rgba(245,238,224,0.12); color:var(--cream); }
.compara .tabla th { color:#E8B4B8; }
.compara .tabla td:first-child { opacity:0.75; }
.compara .tabla th:nth-child(2), .compara .tabla td:nth-child(2) { background:rgba(232,180,184,0.12); color:#fff; font-weight:700; border-left:2px solid #E8B4B8; border-right:2px solid #E8B4B8; }
.compara .tabla tr:first-child th:nth-child(2) { border-top:2px solid #E8B4B8; border-radius:10px 10px 0 0; }
.compara .tabla tbody tr:last-child td { border-bottom:0; }
.compara .tabla tbody tr:last-child td:nth-child(2) { border-bottom:2px solid #E8B4B8; border-radius:0 0 10px 10px; }
.compara .tabla td:nth-child(3) { opacity:0.7; }

.plan { position:relative; }
.badge { position:absolute; top:-12px; left:30px; background:var(--accent); color:var(--cream); font-size:11px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; padding:6px 12px; border-radius:100px; }
.badge.suave { background:var(--surface); color:var(--accent-strong); border:1px solid var(--border-strong); }
.plan.destacado { transform:translateY(-6px); box-shadow:0 2px 4px rgba(140,79,84,0.08), 0 22px 50px rgba(140,79,84,0.18); }
.plan.destacado:hover { transform:translateY(-9px); }
@media (max-width:1000px){ .plan.destacado{ transform:none; } .plan.destacado:hover{ transform:translateY(-3px); } }

.cta-repite { text-align:center; margin:34px 0 8px; }

/* Micro-animaciones: solo si el script activa .anim-activa (respeta reduced-motion) */
.anim-activa .anim { opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
.anim-activa .anim.visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .anim-activa .anim { opacity:1; transform:none; transition:none; } }

/* Móvil */
@media (max-width:520px){
  .hero-ag h1 { font-size:40px; }
  .hero-ag p.sub { font-size:17px; }
  .cifras-barra .in { padding:20px 20px; gap:14px; }
  .cifra-item strong { font-size:32px; }
  .compara.tabla-wrap { padding:6px 10px 10px; border-radius:14px; }
  .compara .tabla th, .compara .tabla td { padding:10px 8px; font-size:14px; }
  .plan { padding:24px 20px; }
  .badge { top:-11px; left:18px; }
  .cta-repite .btn { width:100%; justify-content:center; }
  .pilar-body { padding:18px 20px 22px; }
  .pilar-foto { aspect-ratio:auto; height:160px; }
}

/* Los destinos de las anclas no quedan tapados por la cabecera pegajosa */
.landing section[id], .landing .hero-ag[id] { scroll-margin-top:84px; }

/* ── Lote 11: línea de edad ── */
.plan .nota-plan { font-size:13px; line-height:1.45; opacity:0.8; margin:0; padding-top:10px; border-top:1px solid var(--border); }
.footer-edad { font-size:12.5px; opacity:0.7; margin-top:8px; }


/* ── El salto ───────────────────────────────────────────────────────────────
   Mismo formato visual que «Lo que sí / lo que no»: dos columnas, la izquierda
   clara y la derecha oscura, con filas separadas por una línea fina.

   Las siete filas tienen que quedar alineadas entre columna y columna, así que
   todas las celdas son hijas directas de la MISMA rejilla: comparten fila y se
   igualan solas, sin alturas fijas. Con `grid-auto-flow: column` el DOM lleva
   primero la columna entera de «Sola» y después la de «Con Hedone», que es
   justo el orden en que se apilan en móvil. */
.salto-tabla {
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(8, auto);
  grid-auto-flow:column; column-gap:24px; margin-top:36px;
}
.salto-cab {
  font-size:24px; font-family:'Fraunces',serif; font-weight:300; letter-spacing:-0.01em;
  padding:32px 28px 18px;
}
.salto-cab.izq { background:var(--bg-2); border:1px solid var(--border); border-bottom:0;
  border-radius:18px 18px 0 0; color:var(--text-strong); }
.salto-cab.der { background:#1E1A17; border-radius:18px 18px 0 0; color:var(--cream); }

.salto-celda { padding:16px 28px; }
.salto-celda.izq { background:var(--bg-2); border-left:1px solid var(--border); border-right:1px solid var(--border); }
.salto-celda.der { background:#1E1A17; color:var(--cream); }
.salto-celda.izq + .salto-celda.izq, .salto-celda.izq { border-top:1px solid var(--border); }
.salto-celda.der { border-top:1px solid rgba(245,238,224,0.16); }
.salto-celda:last-child { border-radius:0 0 18px 18px; padding-bottom:32px; }
.salto-celda.izq:last-child { border-bottom:1px solid var(--border); }

.salto-fila-t {
  font-family:'Nunito',sans-serif; font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; font-weight:800; margin:0 0 5px;
}
.salto-celda.izq .salto-fila-t { color:var(--accent-strong); opacity:0.75; }
.salto-celda.der .salto-fila-t { color:#E8B4B8; }
.salto-fila-p { font-size:15.5px; line-height:1.55; margin:0; }
.salto-celda.izq .salto-fila-p { opacity:0.8; }

/* La última fila, la del dinero: separada del resto y con las cifras grandes. */
.salto-celda.total { padding-top:26px; }
.salto-celda.izq.total { border-top:2px solid rgba(140,79,84,0.45); }
.salto-celda.der.total { border-top:2px solid rgba(232,180,184,0.45); }
.salto-cifra { font-family:'Fraunces',serif; font-weight:300; line-height:1; margin:6px 0 0; letter-spacing:-0.02em; }
.salto-cifra.apagada { font-size:clamp(38px, 4.4vw, 52px); color:var(--text-strong); opacity:0.55; }
.salto-cifra.fuerte { font-size:clamp(52px, 7vw, 82px); color:#E8B4B8; }

.salto-nota { font-size:12.5px; opacity:0.75; margin:20px 0 0; text-align:center; line-height:1.5; }
.salto-cta { text-align:center; margin-top:22px; }

@media (max-width:760px) {
  /* Se apilan en el orden del DOM: la columna «Sola» entera y después la otra.
     El emparejamiento se mantiene porque cada fila lleva su propio rótulo. */
  .salto-tabla { grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row; row-gap:0; }
  .salto-celda.izq:last-of-type { border-radius:0 0 18px 18px; border-bottom:1px solid var(--border); padding-bottom:32px; }
  .salto-cab.der { margin-top:22px; }
  .salto-cifra.fuerte { font-size:clamp(52px, 16vw, 76px); }
}

/* Enlace a la página completa del código (lote 12). El bloque se queda en la
   landing; esto lleva a la versión larga, con la parte de «lo que nos cuesta». */
.codigo-mas { text-align:center; margin-top:24px; font-size:16px; }
.codigo-mas a { color:var(--accent-strong); font-weight:700; text-decoration:none; }
.codigo-mas a:hover { text-decoration:underline; }