/* =====================================================================
   ESTÉTICA ACERO · rogerarola.es (05/11/2026)
   Capa que va DESPUÉS de styles.css en todas las páginas.
   Paleta: negro #111111 · carbón #1A1A1A · gris acero #777B80 · plata #D3D3D3
           plata clara #EBEBED · blanco #FFFFFF · rojo #8A2025
           rojo brillo #C02332 · rojo profundo #600209
   Tipografía: Montserrat en todo (ExtraBold en titulares).
   Secciones oscuras (negro/carbón) y secciones plata metálica, alternadas.
   ===================================================================== */

:root {
  --negro: #111111;
  --negro-2: #161617;
  --card: #1C1C1E;
  --borde: #2F3034;
  --dorado: #D3D3D3;          /* acento de texto en oscuro: plata (el rojo va en barras y botones) */
  --rojo: #8A2025;
  --rojo-osc: #600209;
  --rojo-b: #C02332;
  --acero: #777B80;
  --plata: #D3D3D3;
  --blanco: #F5F5F5;
  --gris: #C9CACD;
  --display: 'Montserrat', sans-serif;
  --texto: 'Montserrat', sans-serif;

  --grad-rojo: linear-gradient(180deg, #C42433 0%, #8A2025 55%, #600209 100%);
  --grad-negro: linear-gradient(180deg, #232323 0%, #0B0B0B 100%);
  --grad-plata: radial-gradient(70rem 30rem at 50% 0, rgba(255,255,255,.7), transparent 70%),
                linear-gradient(180deg, #F2F2F4 0%, #E2E2E5 50%, #CDCDD0 100%);
}

/* ───────────── tipografía: Montserrat ExtraBold en titulares ───────────── */
.d1, .d2, .d3 { font-weight: 800; letter-spacing: 0; }
.d1 { font-size: clamp(1.9rem, 4.1vw, 3.6rem); line-height: 1.16; }
.d2 { font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height: 1.18; }
.d3 { font-size: clamp(1.2rem, 2.6vw, 1.75rem); line-height: 1.15; }
.marquee-item { font-weight: 800; font-size: clamp(.95rem, 1.7vw, 1.3rem); letter-spacing: .03em; }
.paso .num { font-weight: 800; font-size: 3.2rem; }
.faq-q::after { font-weight: 700; }
.creds-cols h3, .caso h3, .rec h3, .bono h3, .cmp thead th,
.via b, .area3 b, .band b, .pni-franja b, .via .n, .pilar .n, .esp .esp-icono { font-weight: 800; letter-spacing: -.01em; }
.creds-cols h3, .rec h3 { font-size: 1.25rem; }
.caso h3, .bono h3 { font-size: 1.15rem; }
.band b, .pni-franja b { font-size: 1.2rem; }
.pcard .price, .bono .bprice { font-weight: 800; font-size: 2.1rem; letter-spacing: -.02em; }
.pcard-ghost { font-weight: 900; font-size: 92px; }
.bono .bnum { font-weight: 900; font-size: 46px; }
.instagram .ig-handle { font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: -.01em; }
/* el texto con contorno no queda limpio en Montserrat: se pasa a plata maciza */
.outline { -webkit-text-stroke: 0 !important; color: var(--plata) !important; }

/* palabra clave de los titulares grandes: banda roja con texto blanco */
:is(.d1, .d2) .oro {
  color: #fff;
  background: var(--grad-rojo);
  padding: .02em .2em .07em;
  border-radius: 6px;
  display: inline-block;      /* la franja va entera: no se parte entre líneas */
  max-width: 100%;
  line-height: 1.1;
  margin: .06em 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ───────────── titular del inicio: jerarquía de tamaños ─────────────
   frase pequeña · cifra grande en franja roja · frase pequeña · beneficio grande · etiquetas */
.hero h1.hero-titulo { font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1; letter-spacing: 0; margin-bottom: 1.6rem; }
.hero-titulo > span { display: block; }
.hero-titulo .ht-a { font-size: .42em; font-weight: 700; letter-spacing: .14em; color: #D3D3D3; margin: .2em 0 .35em; }
.hero-titulo .ht-a:first-child { margin-top: 0; }
.hero-titulo .ht-b { display: inline-block !important; font-size: 1em; line-height: 1.08; padding: .06em .2em .1em !important; margin: 0 0 .38em; border-radius: 6px; }
.hero-titulo .ht-c { font-size: .86em; color: #fff; line-height: 1.05; }
.hero-titulo .ht-d { display: flex !important; flex-wrap: wrap; gap: .6rem; font-size: max(.95rem, .26em); margin-top: 1.1em; }
.hero-titulo .ht-d > span {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .55em 1em;
  border: 1px solid rgba(211,211,211,.35); border-radius: 999px;
  color: #F5F5F5; font-weight: 700; letter-spacing: .12em;
  background: rgba(255,255,255,.04);
}
.hero-titulo .ht-d .cruz { color: #C02332; font-size: 1.1em; }
@media (max-width: 700px) {
  .hero h1.hero-titulo { font-size: clamp(2rem, 10.5vw, 2.8rem); }
  .hero-titulo .ht-d { justify-content: center; }
}

/* etiqueta pequeña sobre los titulares: plata + barra roja en diagonal */
.kicker { color: var(--plata); }
.kicker::before {
  width: 10px; height: 16px;
  background: var(--rojo-b);
  transform: skewX(-22deg);
  border-radius: 2px;
}

/* ───────────── botones ───────────── */
.btn { border-radius: 12px; border-color: var(--rojo-osc); }
.btn-oro {
  color: #fff;
  background: var(--grad-rojo);
  border-color: var(--rojo-osc);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 12px 26px -14px rgba(96,2,9,.9);
}
.btn-oro:hover { color: #fff; background: linear-gradient(180deg, #D02A3A 0%, #9A242A 55%, #6E0A12 100%); }
.btn-ghost { border-color: var(--blanco); border-radius: 12px; }
.btn-ghost:hover { color: var(--blanco); border-color: var(--rojo-b); background: rgba(192,35,50,.08); }

/* ───────────── cabecera: barra negra con línea roja ───────────── */
header, header.solido {
  background: var(--grad-negro);
  box-shadow: 0 8px 24px -14px rgba(0,0,0,.7);
}
header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--rojo-b) 20%, var(--rojo-b) 80%, transparent);
  opacity: .8;
  pointer-events: none;
}
.nav-links a:hover, .nav-links a.activo { color: #fff; }
.nav-links a.activo { box-shadow: 0 2px 0 var(--rojo-b); }
.nav-links a.nav-cta, .nav-links a.nav-cta:hover { color: #fff; box-shadow: none; }
.nav-logo img { border-radius: 50%; }
@media (max-width: 880px) {
  .nav-links { background: rgba(14,14,14,.98); }
}

/* ───────────── hero de inicio ───────────── */
.hero { position: relative; overflow: hidden; }
/* franjas rojas en diagonal, como en las plantillas */
.hero::before {
  content: "";
  position: absolute; top: -10%; bottom: -10%; right: 7%;
  width: 70px;
  background: linear-gradient(90deg, var(--rojo-b) 0 46%, transparent 46% 64%, var(--rojo) 64% 100%);
  transform: skewX(-22deg);
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero-col--foto { position: relative; }
/* disco plateado detrás de la foto, pintado como fondo de la propia imagen
   (funciona igual en móvil, donde la columna de la foto se deshace) */
.hero-col--foto::before { display: none !important; }
.hero-figura { position: relative; z-index: 1; }
.hero-figura.acero-recorte {
  width: min(430px, 92%) !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  background: none !important;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.6));
  margin-inline: auto;
  display: block;
}
.hero-sub { position: relative; z-index: 1; }

/* cinta de datos: franja roja */
.marquee {
  background: var(--grad-rojo);
  border-color: transparent;
}
.marquee-item { color: #fff; }
.marquee-item .oro { color: #111; }
.marquee-item::after { color: rgba(255,255,255,.55); }

/* ───────────── secciones plata metálica ─────────────
   Se reasignan las variables dentro de la sección: todo lo que usaba
   blanco sobre negro pasa a negro sobre plata sin tocar styles.css. */
.plan, #como-funciona, #testimonios, .historia, #historia, .credenciales, #credenciales, .recursos, #recursos, #lead, .microbiota-full {
  --negro: #EDEDEF;
  --negro-2: #E4E4E7;
  --card: #F7F7F8;
  --borde: #D2D2D6;
  --blanco: #111111;
  --gris: #3E3F44;
  --plata: #4A4B50;
  --dorado: #8A2025;
  background: var(--grad-plata) !important;
  color: #2A2A2C;
}
:is(.plan, #como-funciona, #testimonios, .historia, #historia, .credenciales, #credenciales, .recursos, #recursos, #lead, .microbiota-full) .kicker { color: #8A2025; }
:is(.plan, #como-funciona, #testimonios, .historia, #historia, .credenciales, #credenciales, .recursos, #recursos, #lead, .microbiota-full) p { color: #3A3B40; }
:is(.plan, #como-funciona, #testimonios, .historia, #historia, .credenciales, #credenciales, .recursos, #recursos, #lead, .microbiota-full) .btn-ghost { color: #111; border-color: #111; }

/* tarjetas: esquinas redondeadas y brillo suave */
.plan-card, .pni-card, .paso, .faq-item, .caso, .pcard, .rec, .bono, .esp, .pilar, .via, .tcard, .ig-profile {
  border-radius: 20px;
}
:is(.plan, #como-funciona, #testimonios, .historia, #historia, .credenciales, #credenciales, .recursos, #recursos, #lead, .microbiota-full) :is(.plan-card, .pni-card, .paso, .rec, .esp, .pilar, .via) {
  background: linear-gradient(180deg, #FAFAFB, #EBEBED);
  border: 2px solid #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 22px 44px -28px rgba(0,0,0,.45);
}
/* tarjetas oscuras */
:is(#transformaciones, .transformaciones, .faq, .instagram, .especialidades, #especialidades, .galeria, #galeria) :is(.caso, .faq-item, .tcard, .ig-profile, .esp) {
  background: linear-gradient(180deg, #232325, #161617);
  border-color: #2F3034;
}

#testimonios .testi {
  background: linear-gradient(180deg, #FAFAFB, #EBEBED);
  border: 2px solid #fff;
  border-radius: 20px;
  box-shadow: 0 22px 44px -28px rgba(0,0,0,.45);
}
#testimonios .testi-name { color: #111; }
#testimonios .testi-ig { color: #8A2025; }
#lead input[type="email"], #lead input[type="text"] {
  background: #fff; color: #111;
  border: 1.5px solid #CFCFD3; border-radius: 12px;
}
#lead input::placeholder { color: #8E8E93; }

/* ───────────── fotos recortadas sobre plata: bloque negro con franjas ─────────────
   (los recortes están pensados para fondo oscuro; sobre plata se veían los bordes) */
.plan-foto, .plan-foto.is-cutout, .historia-foto {
  position: relative;
  overflow: hidden;
  border-radius: 24px !important;
  background: radial-gradient(120% 80% at 50% 25%, #3A3A3C 0%, #1C1C1E 55%, #0B0B0B 100%) !important;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.6);
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  padding-top: 28px !important;
}
.plan-foto::before, .plan-foto.is-cutout::before, .historia-foto::before {
  content: "" !important;
  display: block !important;
  inset: auto;
  height: auto;
  position: absolute; top: -10%; bottom: -10%; right: 12%;
  width: 46px;
  background: linear-gradient(90deg, var(--rojo-b) 0 46%, transparent 46% 64%, var(--rojo) 64% 100%);
  transform: skewX(-20deg);
  opacity: .9;
  z-index: 0;
}
.plan-foto.is-cutout::after, .historia-foto::after { display: none !important; }
.plan-foto img, .historia-foto img {
  position: relative; z-index: 1;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.5));
}

/* ───────────── página de PNI: secciones alternas negro / plata ───────────── */
body.pni main > section:is(:nth-of-type(2), :nth-of-type(4), :nth-of-type(6), :nth-of-type(8)) {
  --negro: #EDEDEF;
  --negro-2: #E4E4E7;
  --card: #F7F7F8;
  --borde: #D2D2D6;
  --blanco: #111111;
  --gris: #3E3F44;
  --plata: #4A4B50;
  --dorado: #8A2025;
  background: var(--grad-plata) !important;
  color: #2A2A2C;
}
body.pni main > section:is(:nth-of-type(2), :nth-of-type(4), :nth-of-type(6), :nth-of-type(8)) .kicker { color: #8A2025; }
body.pni main > section:is(:nth-of-type(2), :nth-of-type(4), :nth-of-type(6), :nth-of-type(8)) p,
body.pni main > section:is(:nth-of-type(2), :nth-of-type(4), :nth-of-type(6), :nth-of-type(8)) li { color: #3A3B40; }
body.pni main > section:is(:nth-of-type(2), :nth-of-type(4), :nth-of-type(6), :nth-of-type(8)) :is(.via, .pilar, .area3, .pcard) {
  background: linear-gradient(180deg, #FAFAFB, #EBEBED) !important;
  border: 2px solid #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 22px 44px -28px rgba(0,0,0,.45);
}
body.pni main > section:is(:nth-of-type(2), :nth-of-type(4), :nth-of-type(6), :nth-of-type(8)) :is(.via, .pilar, .area3, .pcard) :is(b, h3, h4, strong) { color: #111; }
body.pni main > section:is(:nth-of-type(2), :nth-of-type(4), :nth-of-type(6), :nth-of-type(8)) .ti { color: #8A2025; }

/* ───────────── franjas de llamada y pie ───────────── */
.cta-final-bg::after { background: linear-gradient(180deg, rgba(10,10,10,.86), rgba(10,10,10,.93)); }
footer { background: var(--grad-negro); }
footer h4 { color: var(--plata); }
footer a:hover { color: #fff; }

/* cabeceras de página interiores */
.page-hero { background: var(--grad-negro); position: relative; overflow: hidden; }
.page-hero::after { background: none; }
.page-hero::before {
  content: "";
  position: absolute; top: -20%; bottom: -20%; right: 8%;
  width: 60px;
  background: linear-gradient(90deg, var(--rojo-b) 0 46%, transparent 46% 64%, var(--rojo) 64% 100%);
  transform: skewX(-22deg);
  opacity: .85;
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }

/* ───────────── móvil ───────────── */
@media (max-width: 700px) {
  .hero::before { right: -6%; width: 46px; opacity: .55; }
  .page-hero::before { right: -4%; width: 40px; opacity: .5; }
  .hero-figura.acero-recorte { width: min(300px, 78%) !important; }
  /* en móvil no se muestra la foto del curl de bíceps de la sección del plan */
  .plan-foto, .plan-foto.is-cutout { display: none !important; }
}