/*
Theme Name: DPM Landing
Theme URI: https://descubriendoplaceresmenopausia.com
Author: KuarcTech Solutions
Author URI: https://kuarctech.com
Description: Tema landing informativo (Fase 1 / Componente A) para Ana Leonor Ramírez. Una sola página, narrativa, sin menú; cálida, profesional y femenina, alineada a la línea gráfica oficial de la marca. Preparado para crecer hacia la plataforma privada con MemberPress en la Fase 2.
Version: 1.3.0
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dpm-landing
*/

/* ============================================================
   ✦ RETOQUES DE PULIDO v1.3.0 (sobre 1.2.0)
   Identidad SIN cambios (mismos colores, fuentes, píldoras).
   Cada bloque marcado con "✦ PULIDO" indica qué cambió y por qué.
   Resumen:
   1. Ritmo vertical y medida de lectura cómoda (--medida) en bloques largos.
   2. Alternancia de fondos para que secciones contiguas no se fundan.
   3. Sección "2013": foto enmarcada + lista del kit con mejor composición.
   4. "Pausa poética" del Propósito: centrada y equilibrada.
   5. Microinteracciones (hover, :focus-visible, zoom sutil) y a11y.
   6. Tarjetas de Temas: títulos legibles + acento por color en borde/ícono.
   ============================================================ */

/* ============================================================
   DESIGN TOKENS — Línea gráfica oficial Ana Leonor Ramírez
   ============================================================ */
:root {
  --azul:        #1F3C6C;
  --azul-900:    #142a4d;
  --azul-700:    #2a4f8c;
  --rosa:        #A5375A;
  --rosa-700:    #862c49;
  --rosa-300:    #d98aa3;
  --terracota:   #B35429;
  --arena:       #CDB884;
  --arena-200:   #e4d6b9;
  --cafe:        #6A4225;
  --vino:        #782330;
  --magenta:     #be4a6b;

  --crema:       #FBF7F1;
  --crema-200:   #F3EBDF;
  --blanco:      #ffffff;
  --tinta:       #2b2630;
  --tinta-suave: #5d5662;
  --linea:       #ece2d4;

  --sombra-sm: 0 2px 12px rgba(31,60,108,.08);
  --sombra-md: 0 16px 44px rgba(31,60,108,.14);
  --sombra-lg: 0 34px 84px rgba(20,42,77,.24);

  --r-sm: 12px;
  --r-md: 22px;
  --r-lg: 40px;

  --fuente-display: "Caveat", "Segoe Script", cursive;
  --fuente-titulo:  "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fuente-texto:   "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ancho: 1140px;
  --pad: clamp(20px, 5vw, 64px);

  /* ✦ PULIDO 1 — medida de lectura cómoda para párrafos largos (~62–64 caracteres).
     Antes los bloques narrativos llegaban a ~80ch (760px) y cansaban la vista. */
  --medida: 62ch;
  /* ✦ PULIDO 1 — color de foco visible coherente con la marca (accesibilidad). */
  --foco: 0 0 0 3px rgba(165,55,90,.45);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  color: var(--tinta);
  background: var(--crema);
  line-height: 1.75;
  font-size: 17px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  line-height: 1.18;
  color: var(--azul);
  margin: 0 0 .4em;
  letter-spacing: -0.01em;
  text-wrap: balance; /* ✦ PULIDO — títulos con cortes de línea más equilibrados */
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.seccion { padding-block: clamp(44px, 6vw, 80px); position: relative; }

/* ✦ PULIDO 1 — los párrafos sueltos dentro de columnas de texto adoptan
   una medida de lectura cómoda por defecto (se puede anular por sección). */
.sobre p, .origen p, .proposito__inner p, .relanzamiento p, .cierre p {
  max-width: var(--medida);
}

.ojillo {
  font-family: var(--fuente-texto);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 13px;            /* ✦ PULIDO 4 — 14 → 13px: el ojillo es etiqueta, no texto */
  line-height: 1.6;
  color: var(--rosa);
  margin: 0 0 16px;
  display: inline-flex;       /* ✦ PULIDO 4 — consistencia: línea-acento antes del texto */
  align-items: center;
  gap: 12px;
}
/* ✦ PULIDO 4 — pequeña línea-acento para unificar TODOS los ojillos. */
.ojillo::before {
  content: "";
  width: 26px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  flex: none;
}

em { font-style: normal; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 16px;
  padding: 15px 30px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  text-align: center;
  line-height: 1;
}
.btn--primario {
  background: var(--rosa);
  color: var(--blanco);
  box-shadow: 0 12px 26px rgba(165,55,90,.32);
}
.btn--primario:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(165,55,90,.42); }
.btn--primario:active { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(165,55,90,.34); } /* ✦ PULIDO 4 — estado activo */
.btn--linea {
  background: transparent;
  color: var(--azul);
  border-color: var(--azul);
}
.btn--linea:hover { background: var(--azul); color: var(--blanco); transform: translateY(-3px); box-shadow: var(--sombra-sm); } /* ✦ PULIDO 4 — sube como el primario, coherencia */
.btn--linea:active { transform: translateY(-1px); }

/* ✦ PULIDO 5 (a11y) — foco visible para teclado en TODOS los interactivos.
   :focus-visible no afecta al clic con mouse, solo a la navegación con teclado. */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--foco);
  border-radius: 8px;
}
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible { border-radius: var(--r-sm); }

/* ============================================================
   HEADER (sin menú — solo marca)
   ============================================================ */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251,247,241,.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}
.cabecera__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  min-height: 76px;
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo__flor { width: 54px; height: 54px; object-fit: contain; flex: none; transition: transform .3s ease; } /* ✦ PULIDO 4 */
.logo:hover .logo__flor { transform: rotate(-6deg) scale(1.05); } /* ✦ PULIDO 4 — guiño cálido al pasar por la marca */
.logo__txt { display: flex; flex-direction: column; line-height: 1; }
.logo__nombre {
  font-family: var(--fuente-display);
  font-size: 33px;
  font-weight: 700;
  color: var(--rosa);
  letter-spacing: .01em;
}
.logo__sub {
  font-family: var(--fuente-texto);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--azul);
}

/* ============================================================
   ELEMENTOS DECORATIVOS (flor, luna, fuego, hojas)
   ============================================================ */
.deco { position: absolute; pointer-events: none; z-index: 0; user-select: none; }
.deco img { width: 100%; height: auto; display: block; }
.flota { animation: flotar 7s ease-in-out infinite; }
.flota--lento { animation: flotar 11s ease-in-out infinite; }
@keyframes flotar { 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-14px) rotate(2deg); } }

/* Flor grande y tenue como textura de fondo */
.deco--flor-bg { width: 280px; top: -70px; left: -80px; opacity: .14; z-index: 0; }
.deco--flor-bg2 { width: 320px; top: auto; bottom: -90px; left: auto; right: -90px; opacity: .12; }
.deco--flor-bg3 { width: 300px; top: -80px; right: -80px; left: auto; opacity: .12; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 640px at 88% -8%, rgba(165,55,90,.16), transparent 60%),
    radial-gradient(900px 540px at -5% 110%, rgba(205,184,132,.30), transparent 60%),
    linear-gradient(160deg, var(--crema) 0%, var(--crema-200) 100%);
  overflow: hidden;
}
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-areas:
    "top    media"
    "bottom media";
  column-gap: clamp(30px, 5vw, 70px);
  row-gap: 0;
  align-items: start; /* sube el retrato y lo alinea arriba con el texto (pedido de la clienta) */
  padding-block: clamp(54px, 8vw, 96px);
}
.hero__top    { grid-area: top; }
.hero__bottom { grid-area: bottom; }
.hero__titulo {
  font-size: clamp(23px, 2.8vw, 32px); /* ajuste 27-jun: título más pequeño (era 40px, se veía disparejo) */
  margin-bottom: 22px;
  font-weight: 600;
}
.hero__titulo em { color: var(--rosa); }
.hero__texto strong { color: var(--rosa); font-weight: 700; }
.hero__texto em { color: var(--rosa); font-weight: 600; }
.hero__sobre {
  font-size: clamp(15px, 2.2vw, 19px);
  font-weight: 500;
  color: var(--azul);
  margin-bottom: 10px;
  line-height: 1.4;
}
.hero__texto {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--tinta-suave);
  max-width: 52ch;
  margin-bottom: 32px;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__nota {
  margin-top: 26px;
  font-size: 14px;
  color: var(--tinta-suave);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero__nota em { color: var(--terracota); font-weight: 600; }
.hero__nota::before { content: ""; width: 36px; height: 1px; background: var(--rosa); flex: none; }

.hero__media { position: relative; grid-area: media; }
.hero__retrato {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-lg);
  position: relative;
  z-index: 2;
}
.hero__media .deco--flor { width: 175px; top: -52px; right: -30px; z-index: 3; }
.hero__media .deco--luna { width: 88px; bottom: 6%; left: -38px; z-index: 3; }
.hero__media .deco--fuego { width: 60px; top: 28%; right: -28px; z-index: 1; }

/* ============================================================
   PRESENTACIÓN / SOBRE
   ============================================================ */
.sobre { background: var(--crema); position: relative; overflow: hidden; }
.sobre__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
  position: relative;
  z-index: 1;
}
.sobre__media { position: relative; margin-top: 34px; }
.sobre__foto {
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-md);
  width: 100%;
  position: relative;
  z-index: 2;
}
.sobre__media .deco--luna { width: 84px; top: -10px; left: -10px; z-index: 1; }
.sobre__media .deco--flor { width: 96px; top: -12px; left: -12px; z-index: 1; }
.sobre__media .deco--hojas { width: 132px; bottom: -18px; right: -12px; z-index: 3; transform: rotate(8deg); } /* ✦ PULIDO — hojas rosa de la línea gráfica (assets/hojas-rosa.png), un poco más grandes */
.sobre__sub { font-size: 19px; color: var(--azul); margin: 28px 0 0; }
.sobre__sub + .sobre__lista { margin-top: 12px; }
.sobre__lista { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.sobre__formacion { margin-top: clamp(28px, 4vw, 48px); }
.sobre__formacion .sobre__sub { margin-top: 0; }
.sobre__lista--cols { grid-template-columns: repeat(2, 1fr); column-gap: clamp(24px, 4vw, 56px); }
.sobre__lista li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.sobre__lista li::before { content: "✦"; color: var(--rosa); font-size: 16px; margin-top: 2px; flex: none; }

/* ============================================================
   EN 2013 / ORIGEN (historia del producto)
   ✦ PULIDO 3 — reequilibrio total de la composición.
   ============================================================ */
/* Antes: crema-200 (se fundía con Propósito, también crema-200) → ahora crema. */
.origen { background: var(--crema); position: relative; overflow: hidden; }
.origen__grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr; /* ✦ .8/1.2 → casi 1/1: el lado de la foto deja de verse vacío */
  gap: clamp(34px, 5vw, 72px);
  align-items: start; /* ✦ 2-jul — imagen alineada al inicio del texto, no centrada */
}
.origen__titulo { font-size: clamp(22px, 2.8vw, 28px); margin-bottom: .55em; }
.origen__inner { max-width: 760px; margin-inline: auto; }
.origen__media { position: relative; display: flex; justify-content: center; margin: 32px auto 28px; }
/* ✦ PULIDO 3 — la carterita (260×419) ahora va ENMARCADA: tarjeta blanca con
   sombra sobre un panel arena redondeado, para que no flote suelta ni se vea pequeña. */
.origen__marco {
  position: relative;
  background: var(--blanco);
  padding: 16px;
  border-radius: var(--r-md);
  box-shadow: var(--sombra-md);
  max-width: 320px;
  transform: rotate(-1.5deg);
  transition: transform .35s ease, box-shadow .35s ease;
}
.origen__marco::before { /* panel arena detrás, como respaldo cálido */
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  background: var(--crema-200);
  border-radius: var(--r-md);
  z-index: -1;
}
.origen__marco:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--sombra-lg); }
.origen__foto { width: 100%; max-width: 280px; border-radius: var(--r-sm); display: block; }
.origen .deco--hojas-origen { width: 120px; bottom: -26px; left: -10px; z-index: 3; transform: rotate(160deg); opacity: .9; } /* ✦ acento botánico que ata la composición */

.origen p { color: var(--tinta-suave); font-size: 17px; margin: 0 0 16px; }
.origen em { color: var(--rosa); font-weight: 600; }
.origen p strong { color: var(--azul); font-weight: 700; }
/* ✦ PULIDO 3 — la lista del kit pasa de viñetas sueltas a "chips" con check,
   para que los 3 componentes del kit (audios, guía, diario) se lean como un set. */
.origen__lista { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 12px; }
.origen__lista li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 16px; color: var(--tinta);
  background: var(--crema-200);
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  padding: 14px 18px;
}
.origen__lista li::before {
  content: "✓";
  color: var(--blanco);
  background: var(--rosa);
  width: 22px; height: 22px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
  margin-top: 1px; flex: none;
}

/* ============================================================
   DESARROLLO NARRATIVO (propósito)
   ============================================================ */
/* ✦ PULIDO 2 — crema-200 → crema-200 conservado, PERO Origen ya pasó a crema:
   así Origen (crema) y Propósito (crema-200) quedan diferenciados. */
.proposito { background: var(--crema-200); position: relative; overflow: hidden; }
.proposito .deco--hojas { width: 150px; top: 72px; right: 24px; opacity: .85; transform: rotate(-12deg); } /* ✦ hojas rosa: opacidad sube .5→.85 porque el rosa-mauve es más sutil que el café */
.proposito__inner { max-width: 720px; position: relative; z-index: 1; } /* ✦ 760 → 720: medida más cómoda */
.proposito__inner h2 { font-size: clamp(26px, 4vw, 40px); margin-bottom: .6em; }
.proposito__inner p:not(.ojillo) { color: var(--tinta-suave); font-size: 17px; margin: 0 0 16px; } /* ✦ 17.5/18 → 17/16: ritmo más sereno en un bloque largo */
/* ✦ 8-jul — el primer párrafo va al mismo tamaño que el resto (Ana lo veía más grande). */
.proposito__inner > .ojillo + p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--tinta-suave);
  margin-bottom: 16px;
  max-width: var(--medida);
}
.proposito p em { color: var(--rosa); font-weight: 600; }

/* ✦ PULIDO 3 — "PAUSA POÉTICA": los dos llamados + la flor se agrupan y CENTRAN,
   como un respiro al final del texto, en vez de derivar a izquierda/derecha. */
.proposito__pausa {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.proposito__cta {
  font-weight: 600; color: var(--rosa);
  font-size: clamp(17px, 2vw, 21px); line-height: 1.55;
  margin: 0; max-width: 44ch; text-wrap: balance;
}
.proposito__cta--izq, .proposito__cta--der { text-align: center; margin: 0; } /* ✦ anula el drift izq/der */
.proposito__flor { display: block; margin: 8px 0; }
.proposito__flor img { width: 64px; height: auto; display: inline-block; } /* ✦ 90 → 64: la flor acompaña, no compite */

/* ============================================================
   SERVICIOS (charlas / talleres)
   ============================================================ */
/* ✦ PULIDO 2 — crema → crema-200: separa Temas (crema) del bloque anterior
   y hace que las tarjetas blancas resalten más. */
.servicios { background: var(--crema-200); position: relative; overflow: hidden; }
.servicios__head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.servicios__head .ojillo { justify-content: center; } /* ✦ PULIDO 4 — ojillo centrado en heads centrados */
.servicios__head h2 { font-size: clamp(26px, 4vw, 40px); }
.servicios__head p { color: var(--tinta-suave); font-size: 17px; }
.servicios__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}
.servicio {
  background: var(--blanco);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
}
.servicio:hover { transform: translateY(-6px); box-shadow: var(--sombra-md); }
.servicio:focus-within { box-shadow: var(--sombra-md), var(--foco); } /* ✦ PULIDO 5 (a11y) */
.servicio__media { overflow: hidden; } /* ✦ PULIDO 4 — recorta el zoom de la imagen */
.servicio__img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; transition: transform .5s ease; }
.servicio:hover .servicio__img { transform: scale(1.04); } /* ✦ PULIDO 4 — zoom sutil al hover */
.servicio__cuerpo { padding: 26px 28px 30px; }
.servicio__cuerpo h3 { font-size: 22px; margin-bottom: 8px; }
.servicio__cuerpo p { margin: 0; color: var(--tinta-suave); font-size: 15.5px; }
.servicios__nota {
  max-width: 760px; /* ✦ 820 → 760: medida más cómoda */
  margin: 36px auto 0;
  text-align: center;
  color: var(--tinta-suave);
  font-size: 16px;
}
.servicios__nota strong { color: var(--rosa); }

/* ============================================================
   TEMAS (tarjetas)
   ============================================================ */
.temas { position: relative; overflow: hidden; }
.programa__head { max-width: 640px; margin-bottom: 44px; position: relative; z-index: 1; }
.programa__head h2 { font-size: clamp(26px, 4vw, 40px); }
.tarjetas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}
.tarjetas--temas { grid-template-columns: repeat(2, 1fr); align-items: stretch; } /* ✦ PULIDO 6 — alturas iguales por fila */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: 30px 28px;
  box-shadow: var(--sombra-sm);
  transition: transform .3s ease, box-shadow .3s ease;
  border-top: 4px solid var(--rosa);
}
/* ✦ PULIDO 6 — el COLOR por tema se conserva, pero solo en el borde superior
   y en el recuadro del ícono. Los TÍTULOS pasan todos a azul para legibilidad y
   equilibrio (antes café/terracota sobre blanco se veían desparejos). */
.tarjetas--temas .tarjeta:nth-child(2) { border-top-color: var(--terracota); }
.tarjetas--temas .tarjeta:nth-child(3) { border-top-color: var(--cafe); }
.tarjetas--temas .tarjeta:nth-child(4) { border-top-color: var(--arena); }
.tarjetas--temas .tarjeta h3 { color: var(--azul); } /* ✦ títulos unificados */
.tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra-md); }
.tarjeta:focus-within { box-shadow: var(--sombra-md), var(--foco); } /* ✦ PULIDO 5 */
.tarjeta__icono {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: var(--crema-200);
  display: grid; place-items: center;
  margin-bottom: 18px;
}
/* ✦ PULIDO 6 — el recuadro del ícono toma un tinte suave del color del tema,
   así cada tarjeta mantiene su identidad cromática sin recargar el título. */
.tarjetas--temas .tarjeta:nth-child(1) .tarjeta__icono { background: rgba(165,55,90,.10); }
.tarjetas--temas .tarjeta:nth-child(2) .tarjeta__icono { background: rgba(179,84,41,.12); }
.tarjetas--temas .tarjeta:nth-child(3) .tarjeta__icono { background: rgba(106,66,37,.12); }
.tarjetas--temas .tarjeta:nth-child(4) .tarjeta__icono { background: rgba(205,184,132,.22); }
.tarjeta__icono img { width: 40px; height: 40px; object-fit: contain; }
.tarjeta h3 { font-size: 20px; }
.tarjeta p { margin: 0; color: var(--tinta-suave); font-size: 15.5px; }

/* ============================================================
   RELANZAMIENTO (producto digital)
   ============================================================ */
.relanzamiento {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(800px 460px at 90% -10%, rgba(205,184,132,.28), transparent 60%),
    linear-gradient(150deg, var(--azul) 0%, var(--azul-900) 100%);
  color: var(--blanco);
}
.relanzamiento__inner { max-width: 760px; position: relative; z-index: 1; }
.relanzamiento h2 { color: var(--blanco); font-size: clamp(26px, 4vw, 42px); }
.relanzamiento h2 em { color: var(--rosa-300); }
.relanzamiento p:not(.ojillo) { color: rgba(255,255,255,.85); font-size: 17.5px; margin: 0 0 18px; max-width: var(--medida); } /* ✦ PULIDO 1 — medida también sobre azul */
.relanzamiento p em { color: var(--rosa-300); font-weight: 600; }
.relanzamiento p strong { color: var(--rosa-300); font-weight: 700; }
.relanzamiento__der { text-align: right; }
.relanzamiento__sub { font-family: var(--fuente-titulo); font-weight: 600; font-size: clamp(18px, 2.4vw, 24px); color: var(--arena); margin: -6px 0 22px; }
.relanzamiento__lista { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.relanzamiento__lista li { color: rgba(255,255,255,.88); font-size: 16.5px; position: relative; padding-left: 22px; }
.relanzamiento__lista li::before { content: "◆"; color: var(--arena); position: absolute; left: 0; top: 4px; font-size: 11px; }

/* ============================================================
   FRASE DE CIERRE
   ============================================================ */
.cierre { background: var(--crema-200); text-align: center; }
.cierre__inner { max-width: 760px; margin-inline: auto; }
.cierre p { font-size: clamp(17px, 2.2vw, 20px); color: var(--tinta-suave); margin: 0 0 16px; max-width: none; } /* ✦ centrado: anula la medida para no descentrar */
.cierre__fuerte {
  font-family: var(--fuente-display);
  font-size: clamp(26px, 3.6vw, 40px) !important;
  line-height: 1.2;
  color: var(--rosa) !important;
  margin: 0 !important;
}
.cierre__intro { font-weight: 600; color: var(--azul) !important; margin: 0 0 1.4rem; }
.cierre__lista {
  list-style: none; padding: 0; margin: 30px auto 0;
  max-width: 640px; display: grid; gap: 18px; text-align: left; /* ✦ 22 → 18: ritmo más compacto */
}
.cierre__lista li {
  position: relative; padding-left: 36px;
  font-size: 16px; color: var(--tinta-suave); line-height: 1.6;
}
.cierre__lista li::before {
  content: "♥"; position: absolute; left: 0; top: 1px; font-size: 18px;
}
.cierre__lista li strong { display: block; margin-bottom: 3px; font-size: 17.5px; }
.cierre__lista li:nth-child(odd)::before,
.cierre__lista li:nth-child(odd) strong { color: var(--rosa); }
.cierre__lista li:nth-child(even)::before,
.cierre__lista li:nth-child(even) strong { color: var(--azul); }

/* ============================================================
   FORMULARIO / CONTACTO
   ============================================================ */
.cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 8% 110%, rgba(165,55,90,.45), transparent 60%),
    linear-gradient(140deg, var(--azul-900), var(--azul));
  color: var(--blanco);
}
.cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}
.cta h2 { color: var(--blanco); font-size: clamp(26px, 4vw, 42px); }
.cta p:not(.ojillo) { color: rgba(255,255,255,.85); font-size: 17.5px; max-width: var(--medida); }
.cta p em { color: var(--arena); font-weight: 600; }

.form {
  background: var(--blanco);
  border-radius: var(--r-md);
  padding: 32px;
  box-shadow: var(--sombra-lg);
  color: var(--tinta);
}
.form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--azul); }
.form .campo { margin-bottom: 16px; }
.form input, .form select, .form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 15px;
  background: var(--crema);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.form textarea { resize: vertical; min-height: 84px; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--rosa);
  box-shadow: 0 0 0 3px rgba(165,55,90,.14);
  background: #fff;
}
.form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.form__aviso { font-size: 12.5px; color: var(--tinta-suave); margin: 14px 0 0; text-align: center; }
.form__ok {
  display: none;
  background: #e9f7ef;
  border: 1px solid #b6e2c6;
  color: #1f7a44;
  padding: 14px;
  border-radius: var(--r-sm);
  font-weight: 600;
  text-align: center;
  margin-top: 14px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.pie { background: var(--azul-900); color: rgba(255,255,255,.74); }
.pie__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-block: 56px 30px;
}
.pie h4 { color: var(--blanco); font-family: var(--fuente-texto); font-size: 14px; text-transform: uppercase; letter-spacing: .14em; margin: 0 0 16px; font-weight: 600; }
.pie a { transition: color .2s ease; } /* ✦ PULIDO 4 */
.pie a:hover { color: var(--blanco); }
.pie p { font-size: 15px; }
.pie__contacto p { margin: 0 0 10px; display: flex; gap: 10px; align-items: center; }
/* ✦ 8-jul — redes sociales en el pie */
.pie__redes { display: flex; gap: 12px; margin-top: 16px; }
.pie__red { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.10); color: #fff; transition: background .25s ease, transform .25s ease; }
.pie__red:hover { background: var(--rosa); color: #fff; transform: translateY(-2px); }
.pie__red svg { width: 19px; height: 19px; display: block; }
.pie__marca { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pie__logo-img { width: 60px; height: 60px; object-fit: contain; flex: none; border-radius: 12px; }
.pie__logo { font-family: var(--fuente-display); font-size: 30px; color: #fff; line-height: 1; }
.pie__logo span { color: #fff; }
.pie__rol { text-align: center; margin: 14px 0 8px; color: rgba(255,255,255,.9); }
.pie__bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
}
.pie__dev { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; line-height: 1.2; }
.pie__dev-logo { height: 38px; width: auto; display: block; opacity: .92; transition: opacity .2s ease; }
.pie__dev:hover .pie__dev-logo { opacity: 1; }
@media (min-width: 541px) {
  .pie__dev { margin-right: 200px; }
}

/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ============================================================ */
.wa-flotante {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: #fff;
  padding: 13px 20px 13px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 12px 30px rgba(37,211,102,.45);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wa-flotante:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(37,211,102,.55); }
.wa-flotante__icono { width: 26px; height: 26px; flex: none; }
.wa-flotante__txt { white-space: nowrap; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero__grid,
  .sobre__grid,
  .origen__grid,
  .cta__inner,
  .sobre__lista--cols { grid-template-columns: 1fr; }
  .hero__grid { grid-template-areas: none; } /* mobile: fluye texto-arriba → imagen → texto-abajo */
  .hero__top, .hero__media, .hero__bottom { grid-area: auto; }
  .hero__media { max-width: 420px; margin: 26px auto; }
  .servicios__grid,
  .tarjetas,
  .tarjetas--temas,
  .pie__grid { grid-template-columns: 1fr; }
  .sobre__grid { gap: 40px; }
  .sobre__media { max-width: 420px; margin-inline: auto; margin-top: 0; }
  .proposito .deco--hojas { display: none; }
  .origen__media { margin-bottom: 12px; } /* ✦ PULIDO 3 — aire bajo la foto en móvil */
}

@media (max-width: 540px) {
  body { font-size: 16px; }
  .hero__acciones .btn { width: 100%; justify-content: center; }
  .hero__media .deco--flor { width: 104px; top: -26px; right: -8px; }
  .pie__bottom { flex-direction: column; align-items: flex-start; padding-bottom: 64px; }
  .proposito__cta { max-width: 100%; }
  .logo__sub { display: none; }
  .wa-flotante { right: 16px; bottom: 16px; padding: 12px; }
  .wa-flotante__txt { display: none; }
  .origen .deco--hojas-origen { display: none; } /* ✦ PULIDO 3 — sin deco que estorbe en móvil */
}

/* Animación de aparición al hacer scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .flota, .flota--lento { animation: none; }
  .origen__marco { transform: none; }
}

/* ===================== ¿Para quién es este espacio? (doc 2-jul) ===================== */
.para-quien__inner { max-width: 880px; margin-inline: auto; text-align: center; }
.para-quien__lista { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.para-quien__item { margin: 0; max-width: 90%; line-height: 1.75; }
.para-quien__item--der { margin-left: auto; text-align: right; }
.para-quien__item:not(.para-quien__item--der) { margin-right: auto; text-align: left; }
.para-quien__item strong { color: var(--rosa); }
@media (max-width: 640px) {
  .para-quien__item, .para-quien__item--der { max-width: 100%; text-align: left; margin: 0; }
}

/* Línea de cierre bajo las tarjetas de servicios (doc 2-jul) */
.servicios__cierre { max-width: 780px; margin: 2.6rem auto 0; text-align: center; font-weight: 600; color: var(--azul); }

/* ✦ 2-jul — tamaño estandarizado para TODOS los títulos de sección */
.sobre h2,
.origen__titulo,
.proposito__inner h2,
.servicios__head h2,
.programa__head h2,
.relanzamiento h2,
.cta h2,
.cierre__intro {
  font-size: clamp(22px, 2.8vw, 28px);
}