/* Tipografías self-hosted (SIL Open Font License): Baloo 2 y Nunito, variables, subsets latin y latin-ext */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../assets/fonts/baloo2-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../assets/fonts/baloo2-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Haciendo Activo — Sistema de diseño
   Paleta, tipografía y formas tomadas del logo y la tarjeta de la marca.
   ========================================================================== */

:root {
  /* Paleta de marca */
  --crema: #fdf3e7;
  --crema-suave: #fffaf4;
  --fucsia: #e6197d;
  --fucsia-oscuro: #b91264;
  --fucsia-texto: #b91264; /* fucsia para texto de 17 px o menos: 6.1:1 sobre crema-suave */
  --fucsia-tenue: #fde8f1;
  --teal: #2f7a82;
  --teal-suave: #e4f0ef;
  --naranja: #eda03c;
  --oliva: #8a9a5b;
  --tinta: #241a18;
  --texto: #3a2b27;
  --texto-suave: #6f605a;
  --borde: #eaddcf;
  --blanco: #ffffff;
  --whatsapp: #25d366;
  --whatsapp-oscuro: #1da851;

  /* Tipografía */
  --font-titulo: "Baloo 2", ui-rounded, "Segoe UI", sans-serif;
  --font-texto: "Nunito", "Segoe UI", system-ui, sans-serif;

  /* Layout */
  --ancho-max: 1140px;
  --ancho-texto: 68ch;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --sombra: 0 10px 30px rgba(36, 26, 24, 0.09);
  --sombra-suave: 0 3px 12px rgba(36, 26, 24, 0.06);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-texto);
  font-size: 17px;
  color: var(--texto);
  background: var(--crema-suave);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

/*
  Defensa importante: un SVG en línea sin width/height propios se dibuja con un
  tamaño por defecto enorme y deforma lo que lo contiene. Esta regla lo ata al
  tamaño del texto que lo rodea. Los íconos que necesitan otra medida la
  declaran con su propia clase, que gana por especificidad.
*/
svg {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

a {
  color: var(--fucsia-oscuro);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.contenedor {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Accesibilidad --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--fucsia);
  color: #fff;
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

/* Foco sobre fondos oscuros o saturados: contorno blanco */
.pie :focus-visible,
.cta-final :focus-visible {
  outline-color: #fff;
}

/* Campos, botones y plegables: contorno más pegado y siempre visible */
.formulario input:focus-visible,
.formulario textarea:focus-visible,
.formulario select:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

.boton:focus-visible,
.boton-menu:focus-visible,
.nav a:focus-visible,
.nav__boton:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 2px;
}

.faq summary:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Tipografía --- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-titulo);
  font-weight: 700;
  line-height: 1.18;
  color: var(--tinta);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2rem, 3.4vw + 1rem, 3.1rem);
}

h2 {
  font-size: clamp(1.55rem, 1.8vw + 1rem, 2.15rem);
}

h3 {
  font-size: 1.22rem;
}

p {
  margin: 0 0 1em;
}

.bajada {
  font-size: 1.14rem;
  color: var(--texto-suave);
  max-width: var(--ancho-texto);
}

.bajada--centro {
  margin-inline: auto;
}

/* --- Encabezado --- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 250, 244, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}

.encabezado__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 24px;
}

.logo {
  display: block;
  flex-shrink: 0;
}

.logo img {
  height: 46px;
  width: auto;
}

/* --- Navegación --- */
.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.nav a,
.nav__boton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--texto);
  background: none;
  border: none;
  cursor: pointer;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  text-decoration: none;
  white-space: nowrap;
}

.nav a:hover,
.nav__boton:hover,
.nav a[aria-current="page"] {
  background: var(--teal-suave);
  color: var(--teal);
}

.nav__grupo {
  position: relative;
}

.nav__flecha {
  width: 12px;
  height: 12px;
  transition: transform 0.18s ease;
}

.nav__boton[aria-expanded="true"] .nav__flecha {
  transform: rotate(180deg);
}

.nav__submenu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  box-shadow: var(--sombra);
  padding: 8px;
  flex-direction: column;
  gap: 2px;
}

.nav__submenu.abierto {
  display: flex;
}

.nav__submenu a {
  width: 100%;
  font-size: 0.95rem;
}

.encabezado__ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  color: var(--tinta);
  border-radius: var(--r-sm);
}

.encabezado__ig:hover {
  background: var(--teal-suave);
  color: var(--teal);
}

.encabezado__ig svg {
  width: 24px;
  height: 24px;
  display: block;
}

.boton-menu {
  display: none;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 8px;
  color: var(--tinta);
}

.boton-menu svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* --- Botones --- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 999px;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/*
  Clave: los SVG dentro de los botones se dimensionan en relación al texto.
  Sin esto el navegador les da un tamaño por defecto enorme y deforma el botón.
*/
.boton svg,
.tarjeta-contacto svg,
.paso__numero svg {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

.boton:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.boton--whatsapp {
  background: var(--whatsapp);
  color: #fff;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.32);
}

.boton--whatsapp:hover {
  background: var(--whatsapp-oscuro);
}

.boton--fucsia {
  background: var(--fucsia);
  color: #fff;
  box-shadow: 0 6px 18px rgba(230, 25, 125, 0.28);
}

.boton--fucsia:hover {
  background: var(--fucsia-oscuro);
}

.boton--linea {
  background: transparent;
  border-color: var(--teal);
  color: var(--teal);
}

.boton--linea:hover {
  background: var(--teal-suave);
}

.boton--claro {
  background: #fff;
  color: var(--fucsia-oscuro);
}

.boton--bloque {
  width: 100%;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.acciones--centro {
  justify-content: center;
}

.nota-cta {
  margin-top: 12px;
  font-size: 0.92rem;
  color: var(--texto-suave);
}

/* --- Hero --- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--crema);
  padding: 72px 0 84px;
}

.hero--interno {
  padding: 44px 0 52px;
}

.hero__grilla {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

.hero__texto {
  max-width: 640px;
}

.hero__figura {
  margin: 0;
}

.hero__retrato {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra);
  aspect-ratio: 4 / 5;
  background: var(--teal-suave);
}

.hero__retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__decor {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
}

.hero__decor--1 {
  top: -50px;
  right: -40px;
  width: 210px;
}

.hero__decor--2 {
  bottom: -60px;
  left: -55px;
  width: 180px;
}

/* --- Píldoras / chips --- */
.pildoras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.pildora {
  background: #fff;
  border: 1px solid var(--borde);
  color: var(--texto-suave);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
}

/* Epígrafe bajo la foto: los datos profesionales acompañan al retrato. */
.retrato__pie {
  margin-top: 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--texto-suave);
  text-align: center;
  text-wrap: balance;
}

.retrato__pie strong {
  display: block;
  font-family: var(--font-titulo);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tinta);
  margin-bottom: 2px;
}

/* --- Secciones --- */
.seccion {
  padding: 68px 0;
}

.seccion--ajustada {
  padding: 48px 0;
}

.seccion--suave {
  background: var(--teal-suave);
}

.seccion--crema {
  background: var(--crema);
}

.seccion__encabezado {
  max-width: var(--ancho-texto);
  margin: 0 0 38px;
}

.seccion__encabezado--centro {
  margin-inline: auto;
  text-align: center;
}

.texto-largo {
  max-width: var(--ancho-texto);
}

.texto-largo p {
  font-size: 1.06rem;
}

/* --- Grillas --- */
.grilla {
  display: grid;
  gap: 22px;
}

.grilla--3 {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.grilla--4 {
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
}

/* --- Tarjetas de servicio --- */
.tarjeta {
  background: #fff;
  border-radius: var(--r-md);
  padding: 26px;
  box-shadow: var(--sombra-suave);
  border: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.tarjeta--enlace:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra);
}

.tarjeta__icono {
  width: 42px;
  height: 42px;
  margin-bottom: 4px;
}

.tarjeta__icono svg {
  width: 100%;
  height: 100%;
}

.tarjeta h3 {
  margin-bottom: 2px;
}

.tarjeta h3 a {
  color: var(--tinta);
  text-decoration: none;
}

.tarjeta h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tarjeta--enlace {
  position: relative;
}

.tarjeta p {
  color: var(--texto-suave);
  margin-bottom: 0;
}

.tarjeta__mas {
  margin-top: auto;
  padding-top: 14px;
  font-weight: 700;
  color: var(--fucsia-oscuro);
  font-size: 0.95rem;
}

/* --- Puntos de confianza --- */
.punto h3 {
  color: var(--teal);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.punto p {
  color: var(--texto-suave);
  margin-bottom: 0;
}

/* --- Pasos "cómo empezar" --- */
.pasos {
  counter-reset: paso;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 26px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.paso {
  position: relative;
  padding-top: 8px;
}

.paso__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--fucsia);
  color: #fff;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 12px;
}

.paso h3 {
  font-size: 1.1rem;
}

.paso p {
  color: var(--texto-suave);
  margin-bottom: 0;
}

/* --- Listas con tilde --- */
.lista-check {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  padding: 12px 16px;
}

.lista-check svg {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  color: var(--oliva);
  margin-top: 4px;
}

.lista-check--dos {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

/* --- Calendario de empresas --- */
.calendario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.calendario li {
  background: #fff;
  border: 1px solid var(--borde);
  border-left: 4px solid var(--naranja);
  border-radius: var(--r-sm);
  padding: 14px 18px;
}

.calendario__mes {
  display: block;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--naranja);
  margin-bottom: 2px;
}

/* --- Bloque destacado --- */
.destacado {
  background: var(--tinta);
  color: #f4ece4;
  border-radius: var(--r-lg);
  padding: 40px;
}

.destacado h2 {
  color: #fff;
}

.destacado p {
  color: rgba(244, 236, 228, 0.86);
  margin-bottom: 0;
  max-width: var(--ancho-texto);
}

/* --- FAQ --- */
.faq {
  display: grid;
  gap: 10px;
  max-width: 820px;
  margin-inline: auto;
}

.faq details {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  padding: 2px 20px;
}

.faq details[open] {
  border-color: var(--fucsia);
  box-shadow: var(--sombra-suave);
}

.faq summary {
  cursor: pointer;
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: 1.04rem;
  color: var(--tinta);
  padding: 15px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--fucsia);
  flex-shrink: 0;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq details p {
  padding-bottom: 16px;
  color: var(--texto-suave);
  margin: 0;
  max-width: var(--ancho-texto);
}

/* --- Perfil / sobre mí --- */
.perfil {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 52px;
  align-items: start;
}

.perfil__figura {
  margin: 0;
  position: sticky;
  top: 100px;
}

.perfil__foto {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra);
  aspect-ratio: 4 / 5;
  background: var(--teal-suave);
}

.perfil__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lista-formacion {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}

.lista-formacion li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.lista-formacion li::before {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--fucsia);
}

/* --- Contacto --- */
.tarjeta-contacto {
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--borde);
  padding: 26px;
  text-align: center;
  box-shadow: var(--sombra-suave);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tarjeta-contacto svg {
  width: 32px;
  height: 32px;
  color: var(--fucsia);
  margin: 0 auto 8px;
}

.tarjeta-contacto p {
  color: var(--texto-suave);
  margin-bottom: 10px;
}

.tarjeta-contacto .boton {
  margin-top: auto;
}

/* --- Mapa de zona --- */
.zona {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
}

.zona__mapa {
  position: relative;
  background: var(--teal-suave);
}

.zona__mapa img {
  width: 100%;
  height: auto;
}

.zona__etiqueta {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--fucsia-oscuro);
  box-shadow: var(--sombra-suave);
}

.zona__texto {
  padding: 20px 24px 24px;
}

.zona__texto h3 {
  margin-bottom: 4px;
}

.zona__texto p {
  color: var(--texto-suave);
  margin-bottom: 0;
  font-size: 0.97rem;
}

.zona__texto .zona__direccion {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--borde);
  color: var(--tinta);
  font-weight: 600;
}

/* --- Formulario --- */
.formulario {
  display: grid;
  gap: 4px;
  max-width: 540px;
  margin-inline: auto;
}

.formulario label {
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: 12px;
}

.formulario input,
.formulario textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 11px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--texto);
  width: 100%;
}

.formulario input:focus,
.formulario textarea:focus {
  border-color: var(--fucsia);
}

/* --- Blog --- */
.nota {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  padding: 24px;
  box-shadow: var(--sombra-suave);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.nota:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra);
}

.nota__meta {
  font-size: 0.85rem;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.nota h2,
.nota h3 {
  font-size: 1.2rem;
  margin-bottom: 2px;
}

.nota h2 a,
.nota h3 a {
  color: var(--tinta);
  text-decoration: none;
}

.nota h2 a::after,
.nota h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.nota p {
  color: var(--texto-suave);
  margin-bottom: 0;
}

.articulo {
  max-width: var(--ancho-texto);
  margin-inline: auto;
}

.articulo h2 {
  margin-top: 1.6em;
}

.articulo ul {
  padding-left: 1.3em;
}

.articulo li {
  margin-bottom: 8px;
}

.articulo__meta {
  color: var(--texto-suave);
  font-size: 0.92rem;
  margin-bottom: 26px;
}

.vacio {
  text-align: center;
  color: var(--texto-suave);
  padding: 40px 0;
}

/* --- Migas de pan --- */
.migas {
  font-size: 0.86rem;
  color: var(--texto-suave);
  padding: 16px 0 0;
}

.migas a {
  color: var(--texto-suave);
}

/* --- Aviso legal / urgencias --- */
.aviso {
  background: var(--crema);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--naranja);
  border-radius: var(--r-sm);
  padding: 18px 22px;
  font-size: 0.94rem;
  color: var(--texto-suave);
  max-width: var(--ancho-texto);
  margin-inline: auto;
}

.aviso strong {
  color: var(--texto);
}

/* --- CTA final --- */
.cta-final {
  background: linear-gradient(135deg, var(--fucsia) 0%, var(--fucsia-oscuro) 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 52px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-final h2 {
  color: #fff;
}

.cta-final p {
  color: rgba(255, 255, 255, 0.92);
  max-width: 54ch;
  margin-inline: auto;
}

.cta-final .nota-cta {
  color: rgba(255, 255, 255, 0.82);
}

/* --- Pie --- */
.pie {
  background: var(--tinta);
  color: #e8ded4;
  padding: 52px 0 24px;
  margin-top: 20px;
}

.pie a {
  color: #e8ded4;
  text-decoration: none;
}

.pie a:hover {
  text-decoration: underline;
}

.pie__logo img {
  height: 54px;
  width: auto;
  margin-bottom: 14px;
}

.pie__grilla {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 34px;
}

.pie h4 {
  color: #fff;
  font-size: 0.98rem;
  margin-bottom: 12px;
}

.pie ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
  font-size: 0.93rem;
}

.pie__nota {
  font-size: 0.9rem;
  color: rgba(232, 222, 212, 0.75);
  max-width: 40ch;
}

.pie__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  padding-top: 20px;
  font-size: 0.85rem;
  color: rgba(232, 222, 212, 0.68);
  display: grid;
  gap: 8px;
}

/* --- WhatsApp flotante --- */
.wa-flotante {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 200;
  background: var(--whatsapp);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 999px;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 0.97rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  transition: transform 0.15s ease, background 0.15s ease;
}

.wa-flotante:hover {
  transform: translateY(-2px);
  background: var(--whatsapp-oscuro);
  text-decoration: none;
}

.wa-flotante svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* --- Aviso de cookies --- */
.cookies {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 300;
  max-width: 380px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  box-shadow: var(--sombra);
  padding: 20px 22px;
  font-size: 0.92rem;
}

.cookies[hidden] {
  display: none;
}

.cookies p {
  color: var(--texto-suave);
  margin-bottom: 14px;
}

.cookies__acciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cookies .boton {
  padding: 9px 16px;
  font-size: 0.9rem;
  min-height: 44px;
}

/* --- Utilidades --- */
.u-centro {
  text-align: center;
}

.u-mt-16 {
  margin-top: 16px;
}

.pie__h4-sep {
  margin-top: 22px;
}

/* --- Responsive --- */
@media (max-width: 980px) {
  .hero__grilla {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hero__figura {
    max-width: 300px;
    order: -1;
    margin-inline: auto;
  }

  .perfil {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .perfil__figura {
    max-width: 300px;
    margin-inline: auto;
    position: static;
  }

  .pie__grilla {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 820px) {
  body {
    font-size: 16px;
  }

  /* Objetivos táctiles de al menos 44 x 44 px en el pie */
  .pie ul {
    gap: 0;
  }

  .pie ul a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .boton-menu {
    display: inline-flex;
  }

  .encabezado__ig {
    margin-left: auto;
    margin-right: -12px;
  }

  /* El menú cerrado queda desplazado fuera de la pantalla y, por el contexto
     de apilamiento del encabezado, alargaba el ancho del documento: en un
     celular la página se podía arrastrar hacia el costado. `clip` recorta ese
     desborde sin crear un contenedor de scroll, así que `position: sticky`
     sigue funcionando. */
  html,
  body {
    overflow-x: clip;
  }

  .nav {
    position: fixed;
    inset: 0 0 0 26%;
    background: var(--crema-suave);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 88px 20px 28px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.24s ease;
    box-shadow: -12px 0 34px rgba(0, 0, 0, 0.14);
  }

  .nav.abierto {
    transform: translateX(0);
  }

  .nav a,
  .nav__boton {
    width: 100%;
    justify-content: space-between;
    padding: 13px 12px;
    font-size: 1.06rem;
    border-bottom: 1px solid var(--borde);
    border-radius: 0;
  }

  .nav__grupo {
    position: static;
  }

  /* En móvil el submenú se muestra desplegado, sin superposiciones. */
  .nav__submenu {
    display: flex;
    position: static;
    border: none;
    box-shadow: none;
    padding: 0 0 0 14px;
    min-width: 0;
    background: none;
  }

  .nav__submenu a {
    font-size: 0.98rem;
    color: var(--texto-suave);
  }

  .nav__boton .nav__flecha {
    display: none;
  }

  .cta-final {
    padding: 36px 22px;
  }

  .destacado {
    padding: 28px 24px;
  }

  .wa-flotante {
    bottom: 16px;
    right: 16px;
    padding: 13px 16px;
  }

  .wa-flotante span {
    display: none;
  }

  .cookies {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}

@media (max-width: 520px) {
  .logo img {
    height: 38px;
  }

  .pie__grilla {
    grid-template-columns: 1fr;
  }

  .seccion {
    padding: 48px 0;
  }

  .hero {
    padding: 44px 0 56px;
  }
}

/* --- Movimiento reducido --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Impresión --- */
@media print {
  .wa-flotante,
  .encabezado,
  .pie,
  .cookies {
    display: none;
  }
}

/* ==========================================================================
   Motor del blog: tarjetas con imagen, respuesta corta, tablas, líneas de
   ayuda, notas relacionadas, fuentes y categorías.
   ========================================================================== */

/* --- Fila de categorías --- */
.categorias {
  margin-bottom: 28px;
}

.categorias ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.categorias a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 2px solid var(--teal);
  border-radius: 999px;
  color: var(--teal);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  background: transparent;
}

.categorias a:hover {
  background: var(--teal-suave);
}

.categorias a[aria-current="page"] {
  background: var(--teal);
  color: var(--blanco);
}

.categorias a:focus-visible {
  outline: 3px solid var(--fucsia);
  outline-offset: 2px;
}

/* --- Tarjeta de blog con imagen --- */
.nota--media {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.nota__media {
  aspect-ratio: 16 / 9;
  background: var(--crema);
  overflow: hidden;
}

.nota__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nota__media--color {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
}

.nota__media--color span {
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1.15;
}

.nota__media--c0 {
  background: var(--teal-suave);
  color: var(--teal);
}

.nota__media--c1 {
  background: var(--fucsia-tenue);
  color: var(--fucsia-oscuro);
}

.nota__media--c2 {
  background: var(--crema);
  color: var(--texto);
}

.nota__media--c3 {
  background: var(--oliva);
  color: var(--blanco);
}

.nota__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px 24px;
}

.nota--media h3 {
  font-size: 1.2rem;
  margin-bottom: 2px;
}

/* --- Artículo: imagen destacada y meta --- */
.articulo__meta a {
  color: var(--texto-suave);
  font-weight: 700;
}

.articulo__imagen {
  margin: 0 0 26px;
}

.articulo__imagen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--sombra-suave);
}

/* --- Respuesta corta --- */
.respuesta-corta {
  background: var(--teal-suave);
  border-left: 5px solid var(--teal);
  border-radius: var(--r-sm);
  padding: 18px 22px;
  margin: 0 0 28px;
  font-size: 1.08rem;
  color: var(--tinta);
}

.respuesta-corta p {
  margin: 0;
}

.respuesta-corta__etiqueta {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 6px;
}

/* --- Tabla comparativa --- */
.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.4em 0;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--blanco);
}

.tabla-scroll:focus-visible {
  outline: 3px solid var(--fucsia);
  outline-offset: 2px;
}

.tabla-comparativa {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.tabla-comparativa caption {
  caption-side: top;
  text-align: left;
  padding: 12px 16px 4px;
  font-weight: 700;
  color: var(--tinta);
}

.tabla-comparativa th,
.tabla-comparativa td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--borde);
}

.tabla-comparativa thead th {
  background: var(--teal);
  color: var(--blanco);
  font-family: var(--font-titulo);
  font-weight: 700;
}

.tabla-comparativa tbody tr:nth-child(even) {
  background: var(--crema-suave);
}

.tabla-comparativa tbody tr:last-child td {
  border-bottom: 0;
}

/* --- Caja de líneas de ayuda --- */
.lineas-ayuda {
  background: var(--fucsia-tenue);
  border: 2px solid var(--fucsia-oscuro);
  border-radius: var(--r-md);
  padding: 26px 28px;
  margin: 2em 0;
}

.lineas-ayuda h2 {
  margin: 0 0 6px;
  color: var(--fucsia-oscuro);
  font-size: 1.4rem;
}

.lineas-ayuda__intro {
  margin: 0 0 16px;
  color: var(--tinta);
}

.lineas-ayuda__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.lineas-ayuda__lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0;
  padding: 12px 16px;
  background: var(--blanco);
  border-radius: var(--r-sm);
}

.lineas-ayuda__numero {
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--fucsia-oscuro);
}

.lineas-ayuda__numero a {
  color: var(--fucsia-oscuro);
  text-decoration: none;
}

a.lineas-ayuda__numero {
  text-decoration: none;
}

.lineas-ayuda__numero a:hover,
a.lineas-ayuda__numero:hover {
  text-decoration: underline;
}

.lineas-ayuda__numero a:focus-visible,
a.lineas-ayuda__numero:focus-visible {
  outline: 3px solid var(--fucsia);
  outline-offset: 2px;
}

.lineas-ayuda__lista li > span:not(.lineas-ayuda__numero) {
  color: var(--tinta);
  font-weight: 600;
}

/* --- Fuentes --- */
.fuentes {
  margin-top: 2.2em;
  padding-top: 18px;
  border-top: 1px solid var(--borde);
  font-size: 0.92rem;
  color: var(--texto-suave);
}

.fuentes h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.fuentes ul {
  margin: 0;
  padding-left: 1.2em;
}

.fuentes li {
  margin-bottom: 4px;
}

.fuentes a {
  color: var(--teal);
  overflow-wrap: anywhere;
}

/* --- Notas relacionadas --- */
.relacionadas {
  margin-top: 8px;
}

@media (max-width: 520px) {
  .lineas-ayuda {
    padding: 20px 16px;
  }

  .lineas-ayuda__numero {
    font-size: 1.3rem;
  }

  .respuesta-corta {
    padding: 16px 16px;
    font-size: 1rem;
  }

  .nota__cuerpo {
    padding: 18px 18px 20px;
  }
}

/* Cierre sobrio: notas sin llamado comercial (prevención del suicidio). */
.cierre-sobrio {
  max-width: var(--ancho-texto);
  margin: 0 auto;
  padding: 1.1rem 1.4rem;
  border-left: 4px solid var(--teal);
  background: var(--teal-suave);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--texto);
}

/* --- Instagram: grilla de publicaciones destacadas --- */
.instagram {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.instagram__item {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--borde);
  background: var(--crema);
}

.instagram__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.instagram__item:hover img,
.instagram__item:focus-visible img {
  transform: scale(1.04);
}

.instagram__item:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .instagram {
    gap: 6px;
  }

  .instagram__item {
    border-radius: var(--r-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .instagram__item img {
    transition: none;
  }
}