/*
 * tdp-home.css — CSS específico de la Home (Plantilla 1)
 * Se encola solo en is_front_page().
 * Requiere tdp-system.css como base.
 */

/* ============================================================
   Hero — sección 1
   ============================================================ */
.hero {
  background: var(--cream);
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  position: relative;
  z-index: 2;
}

/* H1 más grande en home */
.hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.5rem);
  max-width: 14ch;
  margin-top: .3rem;
}
.hero h1 .accent { color: var(--coral); }

/* Script Caveat bajo el h1 */
.hero-script {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  color: var(--coral);
  line-height: 1;
  display: block;
  margin-top: .7rem;
}
.hero-sub {
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin: 1.5rem 0 2rem;
  max-width: 40ch;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

/* Botón primario del hero más grande que el global (excepción justificada) */
.hero-cta .btn {
  font-size: 1rem;
  padding: .85rem 1.7rem;
}

/* Media blob */
.hero-media {
  position: relative;
  min-height: 420px;
}
.hero-photo {
  position: relative;
  z-index: 2;
  aspect-ratio: 5/6;
  border-radius: 54% 46% 48% 52% / 46% 50% 50% 54%;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-blob {
  position: absolute;
  width: 118%;
  height: 112%;
  left: -9%;
  top: -6%;
  background: var(--honey);
  border-radius: 52% 48% 43% 57% / 55% 50% 50% 45%;
  z-index: 1;
}
.hero-blob.sky {
  background: var(--sky);
  width: 60%;
  height: 60%;
  left: -16%;
  top: auto;
  bottom: -6%;
  z-index: 0;
}
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: 2.4rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}
.scroll-cue svg {
  width: 18px;
  height: 18px;
  animation: bob 3s ease-in-out infinite;
}


/* ============================================================
   Intro / Misión — sección 2
   ============================================================ */
.intro {
  background: #fff;
  padding-block: clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.intro p {
  max-width: 58ch;
  margin-inline: auto;
  color: var(--ink-soft);
  font-size: 1.1rem;
}
.intro h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  max-width: 24ch;
  margin-inline: auto;
  margin-bottom: .8rem;
}


/* ============================================================
   Guías destacadas / Carrusel — sección 3
   ============================================================ */
.featured {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}
.feat-wrap { position: relative; }

/* Blob coral decorativo */
.feat-blob {
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  width: min(580px, 80%);
  aspect-ratio: 1/1;
  background: var(--coral);
  border-radius: 50%;
  z-index: 0;
  box-shadow:
    inset 0 0 0 12px rgba(255, 255, 255, .22),
    inset 0 -34px 70px -34px rgba(21, 36, 74, .3);
}

.feat-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.35fr .9fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
.feat-grid > div { min-width: 0; }

.feat-copy { color: #fff; padding: 1rem .5rem; }
.feat-copy .eyebrow { color: var(--honey); }
.feat-copy h2 { color: #fff; margin: .3rem 0 .6rem; }
.feat-copy .script-sub {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, .95);
  margin-bottom: 1rem;
}
.feat-copy p {
  color: rgba(255, 255, 255, .92);
  max-width: 34ch;
  font-size: .98rem;
}
.feat-copy .btn { margin-top: 1.5rem; }

/* Navegación del carrusel */
.carousel-nav {
  display: flex;
  gap: .6rem;
  margin-top: 1.4rem;
}
.carousel-nav .icon-btn {
  border-color: #fff;
  color: #fff;
}
.carousel-nav .icon-btn:hover {
  background: #fff;
  color: var(--coral);
}

/* Carrusel scroll-snap — arrastrable y con barra visible (indica que hay más) */
.track {
  display: flex;
  gap: 1.3rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .5rem .4rem 1.4rem;
  margin: -.5rem -.4rem 0;
  cursor: grab;
  /* Firefox: barra fina con los colores del tema */
  scrollbar-width: thin;
  scrollbar-color: var(--ocean) var(--line, #e1e7f0);
}
/* Mientras se arrastra: cursor de agarre y sin snap para que sea fluido */
.track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.track > * { cursor: default; }            /* el contenido vuelve al cursor normal */
/* WebKit (Chrome/Safari/Edge): barra fina, redondeada, color océano */
.track::-webkit-scrollbar { height: 8px; }
.track::-webkit-scrollbar-track {
  background: var(--line, #e1e7f0);
  border-radius: 100px;
  margin: 0 .4rem;
}
.track::-webkit-scrollbar-thumb {
  background: var(--ocean);
  border-radius: 100px;
}
.track::-webkit-scrollbar-thumb:hover { background: var(--ocean-deep, var(--ocean)); }

/* Tarjeta de guía (.gcard) */
.gcard {
  scroll-snap-align: start;
  flex: 0 0 clamp(250px, 26vw, 290px);
  background: #fff;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s;
}
.gcard:hover { transform: translateY(-5px); }
.gcard .thumb {
  position: relative;
  aspect-ratio: 5/4;
  overflow: hidden;
}
.gcard .thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gcard .chips {
  position: absolute;
  top: .7rem;
  left: .7rem;
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.gcard .chip {
  background: rgba(255, 255, 255, .92);
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .68rem;
  text-transform: uppercase;
  padding: .2rem .55rem;
  color: var(--ink);
}
.gcard .chip.t { color: var(--sea); }
.gcard .read-badge {
  position: absolute;
  bottom: .6rem;
  right: .7rem;
  background: rgba(21, 36, 74, .72);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--font-display);
  padding: .2rem .55rem;
  border-radius: 100px;
}
.gcard .body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.gcard h3 {
  font-size: 1.05rem;
  line-height: 1.25;
}
.gcard h3 a:hover { color: var(--coral); }


/* ============================================================
   Statement — sección 4
   ============================================================ */
.statement {
  background: #fff;
  padding-block: clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.statement h2 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  max-width: 20ch;
  margin-inline: auto;
}
.statement .script-sub { margin-top: .5rem; }


/* ============================================================
   Chuleta del acuarista — sección 5
   ============================================================ */
.cheat {
  background: var(--cream);
  padding-block: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
  position: relative;
}
.cheat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem 1.4rem;
  position: relative;
  z-index: 2;
}
.cheat-item {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  background: #fff;
  border-radius: 16px;
  padding: 1.05rem 1.15rem;
  box-shadow: var(--shadow-soft);
}
.cheat-item .ck {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--sea);
}
.cheat-item:nth-child(2) .ck { background: var(--coral); }
.cheat-item:nth-child(3) .ck { background: #3f78c0; }
.cheat-item:nth-child(4) .ck { background: var(--honey); color: var(--ocean); }
.cheat-item:nth-child(5) .ck { background: var(--ocean); }
.cheat-item:nth-child(6) .ck { background: #e08a5b; }
.cheat-item .ck svg { width: 18px; height: 18px; }
.cheat-item p { font-size: .9rem; color: var(--ink-soft); line-height: 1.45; }
.cheat-item strong {
  display: block;
  font-family: var(--font-display);
  color: var(--ink);
  font-size: .99rem;
}


/* ============================================================
   Categorías split — sección 6
   ============================================================ */
#categorias { background: var(--cream); }
.cats {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 440px;
}
.cat {
  position: relative;
  padding: clamp(2.2rem, 4vw, 3.4rem) clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #fff;
}
.cat.c-fish  { background: var(--sea); }
.cat.c-gear  { background: var(--honey); color: var(--ocean); }
.cat .kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: .5rem;
}
.cat h3 {
  color: inherit;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: .7rem;
}
.cat p {
  max-width: 34ch;
  font-size: .98rem;
  opacity: .95;
}
.cat.c-fish p { color: rgba(255, 255, 255, .95); }
.cat ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.2rem 0 1.6rem;
}
.cat ul li {
  font-size: .8rem;
  font-weight: 700;
  font-family: var(--font-display);
  padding: .32rem .75rem;
  border-radius: 100px;
}
.cat.c-fish ul li { background: rgba(255, 255, 255, .2); }
.cat.c-gear ul li { background: rgba(29, 49, 96, .12); }
.cat .btn { align-self: flex-start; }


/* ============================================================
   Peces populares — sección 7
   ============================================================ */
.species {
  background: #fff;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}
.species-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  position: relative;
  z-index: 2;
}
.species-foot {
  text-align: center;
  margin-top: 2.4rem;
  position: relative;
  z-index: 2;
}


/* ============================================================
   4 Pasos — sección 8
   ============================================================ */
.steps-sec {
  background: var(--cream);
  padding-block: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}
.steps-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  position: relative;
  z-index: 2;
}
.steps-copy h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.steps-copy p {
  color: var(--ink-soft);
  margin-top: .8rem;
  font-size: 1rem;
  max-width: 38ch;
}
.steps-copy .btn { margin-top: 1.6rem; }
.steps-grid {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.step-item {
  display: flex;
  gap: 1rem;
  background: #fff;
  border-radius: 18px;
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-soft);
}
.step-item .num {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  background: var(--ocean);
}
.step-item:nth-child(2) .num { background: var(--sea); }
.step-item:nth-child(3) .num { background: var(--coral); }
.step-item:nth-child(4) .num { background: var(--honey); color: var(--ocean); }
.step-item h3 { font-size: 1.04rem; }
.step-item p { font-size: .88rem; color: var(--muted); margin-top: .15rem; }


/* ============================================================
   Herramientas (calculadora + FAQ) — sección 9
   ============================================================ */
.tools {
  background: #fff;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}
.tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  position: relative;
  z-index: 2;
}
.toolcard {
  background: var(--sky);
  border-radius: 26px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--ocean);
  position: relative;
  overflow: hidden;
}
.toolcard.t-foam { background: var(--foam); }
.toolcard .kicker {
  font-family: var(--font-script);
  font-size: 1.4rem;
  color: var(--ocean);
  opacity: .8;
}
.toolcard h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  text-transform: uppercase;
  font-weight: 800;
  margin: .1rem 0 .6rem;
}
.toolcard p {
  font-size: .94rem;
  color: var(--ink-soft);
  max-width: 36ch;
}

/* Calculadora de litros */
.calc {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.2rem 0 1rem;
  align-items: flex-end;
}
.calc .field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.calc label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ocean);
  opacity: .8;
}
.calc input[type="number"] {
  width: 80px;
  border: 2px solid rgba(29, 49, 96, .25);
  border-radius: 10px;
  padding: .55rem .6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ocean);
  background: rgba(255, 255, 255, .65);
  appearance: textfield;
}
.calc input[type="number"]:focus {
  outline: 3px solid rgba(29, 49, 96, .3);
}
.calc .sep {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--ocean);
  opacity: .5;
  padding-bottom: .45rem;
}
.calc-result {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  color: var(--coral);
  line-height: 1;
}
.calc-result small {
  display: block;
  font-size: .8rem;
  color: var(--ink-soft);
  font-weight: 600;
  margin-top: .3rem;
}

/* FAQ dentro de toolcard */
.toolcard .faqlist {
  max-width: none;
  margin-top: 1rem;
}
.toolcard .faq {
  background: rgba(255, 255, 255, .55);
  border: none;
}


/* ============================================================
   Blog — últimas entradas — sección 10
   ============================================================ */
.blog-home {
  background: var(--cream);
  padding-block: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  position: relative;
  z-index: 2;
}
.blog-foot {
  text-align: center;
  margin-top: 2.2rem;
  position: relative;
  z-index: 2;
}


/* ============================================================
   Responsive home
   ============================================================ */
@media (max-width: 980px) {
  .hero-grid         { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-media        { max-width: 430px; margin-inline: auto; width: 100%; }
  .feat-grid         { grid-template-columns: 1fr; gap: 2rem; }
  .feat-blob         { width: 115%; right: -8%; top: auto; bottom: -14%; transform: none; }
  .feat-copy         { order: -1; padding: 0; }
  .cheat-grid        { grid-template-columns: repeat(2, 1fr); }
  .steps-layout      { grid-template-columns: 1fr; }
  .species-grid      { grid-template-columns: repeat(2, 1fr); }
  .blog-grid         { grid-template-columns: repeat(2, 1fr); }
  .tools-grid        { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cats              { grid-template-columns: 1fr; }
  .cheat-grid        { grid-template-columns: 1fr; }
  .species-grid      { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
  .blog-grid         { grid-template-columns: 1fr; }

  /* ---- FIX feedback móvil (2026-06-11) ---- */

  /* 1. Hero: los dos botones en UNA fila, mitad y mitad (no apilados) */
  .hero-cta          { flex-wrap: nowrap; gap: .6rem; }
  .hero-cta .btn     { flex: 1 1 0; min-width: 0; justify-content: center;
                       padding-inline: .7rem; font-size: .8rem; white-space: nowrap; }
  .hero-cta .btn svg { flex: none; }

  /* 2. Destacadas: el blob coral (absolute) no cubre el texto en móvil, y el texto
        es BLANCO → quedaba invisible sobre fondo claro (parecía "hueco en blanco").
        Solución: el bloque pasa a TARJETA coral, con el texto blanco legible. */
  .feat-blob            { display: none; }
  .feat-copy            { background: var(--coral); border-radius: 24px;
                          padding: 1.5rem 1.35rem;
                          box-shadow: inset 0 0 0 9px rgba(255, 255, 255, .18); }
  .feat-copy .btn-light { margin-top: 1.2rem; }

  /* 3. Chuleta: las decoraciones flotantes (pez/caracol) tapaban el texto → fuera en móvil */
  .cheat .decor      { display: none; }
}


/* ============================================================
   PARCHE de fidelidad — prototipo v2 (2026-06-11)
   Reglas del handoff v2 que faltaban o cambiaron de nombre en
   el porteo (v2 usa .steps-band/.steps/.step, .blog, .blog-top).
   Anexadas al final para prevalecer sobre lo divergente.
   ============================================================ */

/* Hero — pecera redonda (image-slot del prototipo → img en WP) */
.bowl { position: relative; z-index: 2; width: min(400px, 86%); aspect-ratio: 1/1; margin-inline: auto; }
.bowl::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(185deg, #eaf4fc 0%, #cfe3f4 45%, var(--sky-2) 100%); box-shadow: var(--shadow), inset 0 0 0 9px rgba(255, 255, 255, .95), inset 0 -20px 44px -20px rgba(29, 49, 96, .2); }
.bowl img { position: absolute; inset: 9%; width: 82%; height: 82%; border-radius: 50%; object-fit: cover; }
.bowl::after { content: ""; position: absolute; left: 50%; top: -3.5%; transform: translateX(-50%); width: 44%; height: 10%; border-radius: 50%; background: linear-gradient(180deg, #eaf4fc, #cfe3f4); box-shadow: 0 0 0 8px #fff, 0 12px 20px -14px rgba(21, 36, 74, .4); z-index: 4; }
.bowl .shine { position: absolute; z-index: 3; pointer-events: none; left: 10%; top: 7%; width: 23%; height: 23%; border-radius: 50%; border-top: 6px solid rgba(255, 255, 255, .9); transform: rotate(-38deg); }
.hero-media .creature { position: absolute; z-index: 1; }
.hero-media .plant { position: absolute; color: var(--sea); bottom: -4%; }

/* Pasos — v2 usa .steps-band/.steps/.step */
.steps-band { background: var(--cream); padding-block: clamp(3.5rem, 7vw, 6rem); overflow: hidden; }
.steps-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; position: relative; z-index: 2; }
.steps { display: flex; flex-direction: column; gap: 1rem; }
.step { display: flex; gap: 1.1rem; align-items: flex-start; background: #fff; border-radius: var(--r); padding: 1.1rem 1.3rem; box-shadow: var(--shadow-soft); transition: .2s; }
.step:hover { transform: translateX(5px); }
.step .num { width: 42px; height: 42px; border-radius: 14px; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: #fff; background: var(--ocean); }
.step:nth-child(1) .num { background: var(--coral); }
.step:nth-child(2) .num { background: var(--sea); }
.step:nth-child(3) .num { background: var(--honey); color: var(--ocean); }
.step:nth-child(4) .num { background: var(--ocean); }
.step h3 { font-size: 1.1rem; }
.step p { font-size: .9rem; color: var(--muted); margin-top: .15rem; }

/* Calculadora — multiplicador entre campos */
.calc .mult { font-family: var(--font-display); font-weight: 800; color: var(--ocean); padding-bottom: .55rem; }

/* Blog de la home — v2 usa .blog y .blog-top */
.blog { background: var(--cream); padding-block: clamp(3.5rem, 7vw, 6rem) clamp(5rem, 9vw, 8rem); overflow: hidden; }
.blog-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 2.2rem; position: relative; z-index: 2; }
.blog-top .eyebrow { color: var(--sea); }

/* Hero — scroll cue */
.scroll-cue .ring { width: 46px; height: 46px; border: 2px solid var(--ocean); border-radius: 50%; display: grid; place-items: center; color: var(--ocean); transition: .2s; }
.scroll-cue:hover .ring { background: var(--ocean); color: #fff; transform: translateY(3px); }

/* Featured — sin esto el carrusel no puede hacer scroll horizontal (grid blowout) */
.feat-grid > div { min-width: 0; }

/* Featured — interior de las tarjetas de guía */
.gcard .ph { aspect-ratio: 5/4; border-radius: 0; border: none; }
.gcard .pills { position: absolute; top: .7rem; left: .7rem; display: flex; gap: .4rem; }
.gcard .pills i { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--ocean); box-shadow: 0 2px 8px -3px rgba(21, 36, 74, .4); }
.gcard .pills svg { width: 16px; height: 16px; }
.gcard .time { position: absolute; top: .7rem; right: .7rem; background: #fff; border-radius: 100px; padding: .25rem .6rem; font-family: var(--font-display); font-weight: 700; font-size: .72rem; color: var(--ocean); box-shadow: 0 2px 8px -3px rgba(21, 36, 74, .4); }
.gcard-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; }

/* Calculadora — detalles */
.calc input:focus { outline: 2px solid var(--ocean); }
.calc-result span { font-size: 2.1rem; color: var(--coral); }
.calc-note { font-size: .8rem; color: var(--ink-soft); margin-top: .8rem; }

/* Newsletter — etiqueta burbuja */
.news .bubble-tag { display: inline-block; white-space: nowrap; background: var(--honey); color: var(--ocean); font-family: var(--font-script); font-weight: 700; font-size: 1.5rem; padding: .3rem 1.1rem; border-radius: 16px 16px 16px 4px; margin-bottom: 1rem; transform: rotate(-3deg); }

/* Intro — titular lede grande */
.intro .lede { max-width: 24ch; margin: 0 auto; font-family: var(--font-display); font-weight: 700; text-transform: none; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.25; color: var(--ocean); }
.intro p.sub { max-width: 46ch; margin: 1.3rem auto 0; color: var(--ink-soft); }
.intro .btn { margin-top: 2rem; }

/* Statement */
.statement .lede { max-width: 26ch; margin: 0 auto; }
.statement p.sub { max-width: 48ch; margin: 1.3rem auto 0; color: var(--ink-soft); }

/* Responsive del parche */
@media (max-width: 980px) {
  .steps-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PARCHE SEO encabezados — 2026-06-12
   Los títulos de las gcards dejan de ser h3 (iban antes del H2
   de su sección) y los hooks de las fishcards son párrafos nuevos.
   ============================================================ */
.gcard .gcard-h {
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
}
.gcard .gcard-h a:hover { color: var(--coral); }
.fishcard .hook {
  font-size: .95rem;
  color: var(--ink-soft);
  margin: .45rem 0 0;
}

/* ============================================================
   PARCHE hero bowl — 2026-06-12 (pedido del usuario)
   La foto llena casi toda la pecera y se difumina hacia el borde
   dibujado (máscara radial) en vez de cortar en un círculo duro.
   ============================================================ */
.bowl img {
  inset: 2%;
  width: 96%;
  height: 96%;
  -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 88%);
  mask-image: radial-gradient(circle, #000 60%, transparent 88%);
}
/* El fundido va hacia agua profunda (oscura), no hacia el azul claro:
   el degradado del vaso pasa a tonos de fondo de acuario. El aro blanco
   del cristal lo conserva el box-shadow de la regla original. */
.bowl::before {
  background: radial-gradient(circle at 50% 40%, #2a6076 0%, #173d52 55%, #0e2a3d 100%);
}