/* ==========================================================================
   SEREA — Portada · estilo de lauraperezpsicologia.com, ejecutado a nivel
   profesional. Colores y estructura de secciones inspirados en esa web;
   tipografía Poppins/Karla (identidad Serea); proporciones, jerarquía,
   espaciado y detalle trabajados desde cero.
   ========================================================================== */

:root {
  /* Colores — de lauraperezpsicologia.com */
  --c-mostaza: #D9A233;          /* más dorado y menos plano que el tono anterior */
  --c-mostaza-suave: #E8BE64;
  --c-verde-boton: #2F7D5B;      /* más saturado que el verde de área, para que "Pedir cita" destaque como la acción principal */
  --c-verde-boton-hover: #256B4C;
  --c-verde-oscuro: #3E5F4F;   /* pie de página y titulares oscuros */
  --c-verde-pie: #33503F;
  --c-texto: #4A4A46;
  --c-texto-suave: #6B6B65;
  --c-tinta: #24322A;
  --c-header-bg: #FDFCFA;
  --c-area-bg: #F7FAFC;
  --c-linea: #E7E4DD;

  /* Colores por servicio (área) — el verde queda reservado para la
     portada y los elementos de marca (botones, logo); cada página
     interior tiene su propio color, tomado de la página equivalente de
     lauraperezpsicologia.com (mismo criterio que el mostaza). Cada uno
     tiene dos tonos: "-banda" es el tono real, claro y luminoso, para
     fondos grandes (hero) con texto oscuro encima; el tono sin sufijo
     es una versión oscurecida del mismo color, para texto pequeño y
     bordes sobre fondo claro (cumple AA 4.5:1 sobre --c-area-bg). */
  --c-area-infancia-banda: #EEAABD;  /* rosa — muestreado de infantil/banda-grande.png */
  --c-area-infancia: #BF4D60;
  --c-area-perinatal-banda: #F5CC7C; /* mostaza claro — muestreado de perinatal/hero-banda.png */
  --c-area-perinatal: #D89B3A;
  --c-area-adultos-banda: #DDCBBB;   /* beige cálido, tono apagado a propósito para diferenciarlo de Equipo/Logopedia — tu web usa un gris (#DFE0E4) aquí, este es el equivalente cálido */
  --c-area-adultos: #916B49;
  --c-area-medicina-banda: #8FC1E0;  /* azul cielo más saturado que Dificultades, para que no se confundan */
  --c-area-medicina: #2E78A7;
  --c-area-logopedia-banda: #F0997A; /* coral, el más "rojo" de la familia melocotón */
  --c-area-logopedia: #CA4617;
  --c-logopedia-lenguaje-banda: #A8DDD1; /* verde azulado — complementario del naranja de Logopedia, propio de Lenguaje/habla/Atención Temprana */
  --c-logopedia-lenguaje: #2E9E8C;
  --c-logopedia-degluc-banda: #E3B8CC;   /* malva — complementario cálido, propio de Deglución y lactancia */
  --c-logopedia-degluc: #8C4A6B;
  --c-area-fisio-banda: #9ED9C7;     /* menta clara — sin equivalente en tu web, familia de la paleta real */
  --c-area-fisio: #327F68;
  --c-area-pedagogia-banda: #F1ECB1; /* amarillo pálido, más claro que Perinatal para no confundirse con la mostaza */
  --c-area-pedagogia: #7C7416;
  --c-equipo-banda: #F2C08C;         /* melocotón, el más "naranja/claro" de la familia — página de Equipo */
  --c-equipo: #AA6013;
  --c-psico-general-banda: #D9C7E8;  /* lila suave — página general de Psicología, sin equivalente en tu web */
  --c-psico-general: #8F5BBC;
  --c-area-dificultades-banda: #CDDAEB; /* azul cielo — muestreado de dificultades/banda-2.png */
  --c-area-dificultades: #4774B1;
  --c-area-familia-banda: #B9B5E3;   /* lavanda-azulada — tu web combina Adultos y Familias en un gris (#DFE0E4); al separarlas en dos páginas, Familia usa este tono distinto de Adultos (beige) */
  --c-area-familia: #6F66C5;
  --c-area-matrona-banda: #C7D4A8;   /* verde salvia — sin equivalente en tu web; único tono "verde tierra" de la paleta, distinto del menta de Fisioterapia */
  --c-area-matrona: #5C7A38;
  --c-area-social-banda: #C3CDD9;    /* azul pizarra apagado — calmado y distinto de los azules de Medicina/Dificultades (más vivos) y de los verdes de Fisio/Matrona */
  --c-area-social: #4A5E76;

  /* Colores propios de las 4 áreas de Psicología infantil que antes
     compartían todas el rosa de Infancia (Conducta, Neurodesarrollo,
     TDAH, Gestión emocional) — Dificultades ya tenía el suyo (azul,
     arriba). Elegidos dentro de la misma familia luminosa y cálida,
     distintos entre sí y del resto de la paleta del sitio. */
  --c-area-conducta-banda: #F5BE85;      /* naranja/tangerina */
  --c-area-conducta: #B36A16;
  --c-area-neurodesarrollo-banda: #9FDCE3; /* turquesa */
  --c-area-neurodesarrollo: #1C7A87;
  --c-area-tdah-banda: #F8D573;          /* dorado/ámbar */
  --c-area-tdah: #8C6008;
  --c-area-emocional-banda: #E3AFA8;     /* rosa empolvado — distinto del rosa vivo de Infancia, misma familia cálida */
  --c-area-emocional: #953F35;

  /* Pasos del proceso */
  --c-paso-1: #CDE9F5;
  --c-paso-2: #C2CDC1;
  --c-paso-3: #EDAABB;
  --c-paso-4: #F5CC7C;

  --f-titular: 'Poppins', sans-serif;
  --f-cuerpo: 'Karla', sans-serif;

  --clon-max: 1280px;
  --radio: 10px;
  --radio-chico: 6px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.clon { margin: 0; color: var(--c-tinta); font-family: var(--f-cuerpo); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1,h2,h3 { margin: 0; font-family: var(--f-titular); font-weight: 600; }
p { margin: 0; }
a { text-decoration: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: var(--f-cuerpo); }

.clon-wrap {
  max-width: var(--clon-max);
  margin: 0 auto;
  padding: 0 28px;
}
@media (min-width: 1340px) { .clon-wrap { padding: 0 20px; } }

/* ---------- Barra superior ----------
   Recuperada a petición: franja de contacto rápido, fija por encima de la
   cabecera. En mostaza (no arena) porque mantiene el contraste blanco que
   ya funcionaba bien y sigue leyéndose como "llamada de atención" — el
   verde queda protagonista solo en la banda del hero, más abajo. ------- */
.clon-barra {
  background: var(--c-mostaza);
  padding: 9px 0;
}
.clon-barra .clon-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 22px; flex-wrap: wrap; }
.clon-barra a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; font-size: 14px; letter-spacing: .01em; transition: opacity .15s ease; }
.clon-barra a:hover { opacity: .8; }
.clon-barra svg { width: 15px; height: 15px; }

/* ---------- Cabecera fija ----------
   La barra de arriba NO es fija — se desplaza con la página, como en la
   web de referencia. Al bajar, la cabecera queda pegada arriba (la barra
   desaparece de la vista) y se encoge un poco. -------------------------- */
.clon-header {
  background: var(--c-header-bg);
  border-bottom: 1px solid var(--c-linea);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow .2s ease;
}
.clon-header.con-scroll { box-shadow: 0 8px 24px -16px rgba(36,50,42,.25); }
.clon-header .clon-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; padding-bottom: 16px; transition: padding .2s ease; }
.clon-header.con-scroll .clon-wrap { padding-top: 9px; padding-bottom: 9px; }
.clon-logo { height: 68px; width: auto; transition: height .2s ease; }
.clon-header.con-scroll .clon-logo { height: 48px; }
@media (min-width: 640px) { .clon-logo { height: 78px; } .clon-header.con-scroll .clon-logo { height: 52px; } }


.clon-nav-desk { display: none; align-items: center; gap: 8px; }
.clon-nav-desk > a, .clon-nav-item > button, .clon-nav-item > a[aria-haspopup] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  font-family: var(--f-titular);
  font-weight: 500;
  font-size: 15px;
  color: var(--c-verde-pie);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radio-chico);
}
.clon-nav-desk > a:hover, .clon-nav-item > button:hover, .clon-nav-item > a[aria-haspopup]:hover { background: var(--c-area-bg); }
.clon-nav-item { position: relative; }
.clon-nav-item > button svg, .clon-nav-item > a[aria-haspopup] svg { width: 11px; transition: transform .15s ease; }
.clon-nav-item:hover > button svg, .clon-nav-item.abierto > button svg,
.clon-nav-item:hover > a[aria-haspopup] svg, .clon-nav-item.abierto > a[aria-haspopup] svg { transform: rotate(180deg); }

.clon-submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  border-radius: var(--radio);
  box-shadow: 0 18px 46px -16px rgba(36,50,42,.28);
  padding: 10px;
  min-width: 260px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 80;
}
/* Solo el desplegable propio de cada nivel — el hover de "Servicios" no
   debe abrir a la vez el anidado de "Psicología". */
.clon-nav-item:hover > .clon-submenu,
.clon-nav-item:focus-within > .clon-submenu,
.clon-nav-item.abierto > .clon-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.clon-submenu a { display: block; padding: 9px 14px; border-radius: var(--radio-chico); font-family: var(--f-titular); font-size: 14.5px; font-weight: 500; color: var(--c-tinta); transition: background .12s ease, color .12s ease; }
.clon-submenu a:hover { background: var(--c-area-bg); color: var(--c-verde-oscuro); }
.clon-submenu .grupo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: #9C9A93; font-weight: 600; padding: 8px 14px 4px; }
.clon-submenu hr { border: none; border-top: 1px solid var(--c-linea); margin: 8px 6px; }

/* Submenú anidado (Psicología dentro de Servicios) */
.clon-nav-item--anidado { width: 100%; }
.clon-submenu-trigger {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px 9px 14px !important;
  font-family: var(--f-titular);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--c-tinta);
  background: none;
  border: none;
  border-radius: var(--radio-chico);
  cursor: pointer;
  text-align: left;
}
.clon-submenu-trigger:hover { background: var(--c-area-bg); }
.clon-submenu-trigger svg { width: 8px; flex: none; transition: transform .15s ease; }
.clon-nav-item--anidado:hover > .clon-submenu-trigger svg,
.clon-nav-item--anidado.abierto > .clon-submenu-trigger svg { transform: rotate(90deg); }
.clon-submenu--anidado {
  top: -10px;
  left: calc(100% + 8px);
  min-width: 240px;
}
@media (max-width: 1220px) {
  .clon-submenu--anidado { left: auto; right: calc(100% + 8px); }
}

.clon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--c-verde-boton);
  color: #fff;
  font-family: var(--f-titular);
  font-weight: 600;
  font-size: 15.5px;
  padding: 16px 30px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 10px 24px -14px rgba(47,125,91,.6);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.clon-btn svg { width: 18px; height: 18px; flex: none; }
.clon-btn:hover {
  background: var(--c-verde-boton-hover);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -14px rgba(37,107,76,.65);
}
.clon-btn:active { transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(37,107,76,.55); }
.clon-btn--linea { background: transparent; border-color: currentColor; color: var(--c-verde-oscuro); }
.clon-btn--linea:hover {
  background: var(--c-verde-oscuro);
  border-color: var(--c-verde-oscuro);
  color: #fff;
  box-shadow: 0 14px 28px -12px rgba(36,50,42,.4);
}
/* Sobre fondos oscuros (hero, CTA) el relleno de hover es blanco, no verde */
.clon-hero .clon-btn--linea:hover,
.clon-cta .clon-btn--linea:hover { background: #fff; border-color: #fff; color: var(--c-verde-oscuro); box-shadow: 0 14px 28px -12px rgba(0,0,0,.35); }

.clon-toggle { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--c-verde-pie); padding: 4px; }
.clon-nav-movil { display: none; flex-direction: column; padding: 8px 28px 20px; border-top: 1px solid var(--c-linea); }
.clon-nav-movil.abierto { display: flex; }
.clon-nav-movil a.top { font-family: var(--f-titular); font-weight: 500; font-size: 15.5px; color: var(--c-verde-pie); padding: 11px 0; }
.clon-nav-movil a.hijo { font-family: var(--f-titular); font-weight: 500; font-size: 14.5px; color: var(--c-texto); padding: 9px 0 9px 16px; border-left: 2px solid var(--c-linea); }
.clon-nav-movil a.nieto { font-family: var(--f-titular); font-weight: 500; font-size: 13.5px; color: var(--c-texto-suave); padding: 8px 0 8px 32px; border-left: 2px solid var(--c-linea); }
.clon-nav-movil .clon-btn { margin-top: 12px; align-self: flex-start; }

@media (min-width: 980px) {
  .clon-nav-desk { display: flex; }
  .clon-toggle { display: none; }
  .clon-nav-movil { display: none !important; }
}

/* ---------- Hero: banda de color + foto integrada ----------
   El color de la banda es configurable con --hero-color (por defecto,
   mostaza — pensado para páginas interiores de servicio, al estilo de
   la página de perinatal de referencia). La portada usa la variante
   --marca (verde corporativo) porque es la primera impresión del
   centro: aquí manda la identidad de Serea, no el color de un servicio.
   La técnica de recorte (arco / diagonal / fondo) es independiente del
   color — se combinan con una segunda clase. ---------------------------- */
.clon-hero { --hero-color: var(--c-mostaza); background: var(--hero-color); overflow: hidden; position: relative; }
.clon-hero--marca { --hero-color: var(--c-verde-oscuro); }
.clon-hero--equipo { --hero-color: var(--c-equipo-banda); }
.clon-hero .clon-wrap {
  display: grid;
  gap: 36px;
  padding-top: 56px;
  padding-bottom: 56px;
  align-items: center;
}
.clon-hero .clon-etiqueta {
  display: inline-block;
  font-family: var(--f-titular);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  opacity: .85;
  margin-bottom: 16px;
}
.clon-hero h1 { font-size: 30px; line-height: 1.16; color: #fff; margin-bottom: 16px; max-width: 15ch; }
.clon-hero .clon-lead { font-family: var(--f-cuerpo); font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.92); max-width: 42ch; margin-bottom: 26px; }
.clon-hero .clon-acciones { display: flex; flex-wrap: wrap; gap: 14px; }
.clon-hero .clon-btn--linea { color: #fff; }

@media (min-width: 720px) { .clon-hero h1 { font-size: 40px; } }
@media (min-width: 980px) {
  .clon-hero .clon-wrap { grid-template-columns: 1.05fr .95fr; padding-top: 72px; padding-bottom: 72px; gap: 20px; }
  .clon-hero h1 { font-size: 48px; max-width: 12ch; }
}

/* Variante clara — para los tonos luminosos y pastel tomados de tu web
   (mostaza claro, rosa, azul cielo...): el texto pasa a tinta oscura en
   vez de blanco, igual que en tus páginas de referencia. */
.clon-hero--claro .clon-etiqueta { color: var(--c-verde-oscuro); opacity: .9; }
.clon-hero--claro h1 { color: var(--c-tinta); }
.clon-hero--claro .clon-lead { color: var(--c-texto); }
.clon-hero--claro .clon-btn--linea { color: var(--c-tinta); }
.clon-hero--claro .clon-btn--linea:hover { background: var(--c-tinta); border-color: var(--c-tinta); color: #fff; }

/* Variante compacta — páginas interiores (Equipo, Servicios...): mismo
   patrón banda+foto que la portada, pero más bajo, porque aquí la foto
   acompaña al título en vez de ser la primera impresión del centro. */
.clon-hero--compacto h1 { font-size: 28px; max-width: none; }
.clon-hero--compacto .clon-hero-foto { height: 200px; max-width: 340px; }
@media (min-width: 720px) { .clon-hero--compacto h1 { font-size: 34px; } }
@media (min-width: 980px) {
  .clon-hero--compacto .clon-wrap { padding-top: 48px; padding-bottom: 48px; }
  .clon-hero--compacto h1 { font-size: 38px; max-width: none; }
  .clon-hero--compacto .clon-hero-foto { height: 280px; max-width: 340px; }
}

/* --- Variante A: foto en arco (marco arquitectónico, seña de marca) --- */
.clon-hero--arco .clon-hero-foto {
  position: relative;
  height: 280px;
  border-radius: 260px 260px 18px 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(36,50,42,.4);
  justify-self: center;
  width: 100%;
  max-width: 420px;
}
.clon-hero--arco .clon-hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
@media (min-width: 980px) { .clon-hero--arco .clon-hero-foto { height: 460px; max-width: 480px; border-radius: 400px 400px 24px 24px; } }

/* Acento cálido junto al arco — coral en dosis pequeña (<10%, regla de
   identidad), para que la banda verde no quede fría. Solo en escritorio,
   donde hay espacio para que se lea como detalle y no como ruido. */
.clon-hero--arco .clon-hero-acento {
  display: none;
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #E08E83; /* coral de identidad, único acento cálido de la banda */
}
@media (min-width: 980px) {
  .clon-hero--arco .clon-hero-acento { display: block; top: 18%; right: 6%; }
}

/* --- Variante B: corte diagonal, foto a sangre --- */
.clon-hero--diagonal { padding: 0; }
.clon-hero--diagonal .clon-wrap { padding-top: 48px; padding-bottom: 48px; }
.clon-hero--diagonal .clon-hero-foto {
  position: relative;
  height: 240px;
  margin: 0 -28px;
}
.clon-hero--diagonal .clon-hero-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 980px) {
  .clon-hero--diagonal { overflow: hidden; }
  .clon-hero--diagonal .clon-wrap { padding-top: 0; padding-bottom: 0; min-height: 560px; }
  .clon-hero--diagonal .clon-hero-foto { position: absolute; inset: 0; left: 48%; height: 100%; margin: 0; }
  .clon-hero--diagonal .clon-hero-foto img { clip-path: polygon(9% 0, 100% 0, 100% 100%, 0% 100%); }
  .clon-hero--diagonal .clon-wrap { grid-template-columns: 1fr; position: relative; z-index: 1; }
  .clon-hero--diagonal .clon-hero-texto { max-width: 480px; }
}

/* --- Variante C: foto de fondo completa + velo de color ----------------
   El velo usa color-mix con --hero-color, así que se adapta al color
   propio de cada página (el modificador de color se combina con esta
   clase) en vez de estar fijado a un tono concreto. ------------------- */
.clon-hero--fondo { background-size: cover; background-position: center; }
.clon-hero--fondo::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Velo centrado (antes era un degradado en diagonal, pensado para texto
     alineado a la izquierda) — con el texto centrado, el velo se centra
     también, así que la legibilidad es la misma independientemente del
     ancho real del título/párrafo de cada página, y la foto respira en
     los extremos izquierdo y derecho por igual. */
  background: radial-gradient(65% 140% at 50% 50%,
    color-mix(in srgb, var(--hero-color) 90%, transparent) 0%,
    color-mix(in srgb, var(--hero-color) 70%, transparent) 45%,
    color-mix(in srgb, var(--hero-color) 42%, transparent) 72%,
    color-mix(in srgb, var(--hero-color) 15%, transparent) 100%);
}
.clon-hero--fondo .clon-wrap { position: relative; z-index: 1; grid-template-columns: 1fr; }
.clon-hero--fondo .clon-hero-texto { max-width: 560px; text-align: center; }
.clon-hero--fondo .clon-hero-foto { display: none; }
.clon-hero--fondo .clon-wrap { min-height: 420px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 64px; padding-bottom: 64px; }
@media (min-width: 980px) { .clon-hero--fondo .clon-wrap { min-height: 560px; } }
.clon-hero--compacto.clon-hero--fondo .clon-wrap { min-height: 280px; padding-top: 48px; padding-bottom: 48px; }
@media (min-width: 980px) { .clon-hero--compacto.clon-hero--fondo .clon-wrap { min-height: 340px; } }

/* Altura FIJA (no solo mínima) para un grupo de páginas hermanas que
   deben medir exactamente lo mismo (p. ej. las subpáginas de Psicología
   infantil) — con min-height, la página con el título más largo queda
   más alta que las demás. El tamaño cubre con margen el contenido más
   largo del grupo actual; si se añade texto todavía más largo a alguna
   página de un grupo con esta clase, revisar que siga cabiendo. */
.clon-hero--compacto.clon-hero--fondo.clon-hero--altura-fija .clon-wrap { min-height: 0; height: 520px; }
@media (min-width: 980px) { .clon-hero--compacto.clon-hero--fondo.clon-hero--altura-fija .clon-wrap { height: 450px; } }

/* Misma idea que --altura-fija, pero dimensionada para las 4 páginas
   de área de Psicología (Infantil, Perinatal, Adultos, Familias) —
   textos más cortos que las mini-páginas, así que la altura es menor. */
.clon-hero--compacto.clon-hero--fondo.clon-hero--altura-area .clon-wrap { min-height: 0; height: 405px; }
@media (min-width: 980px) { .clon-hero--compacto.clon-hero--fondo.clon-hero--altura-area .clon-wrap { height: 368px; } }

/* ---------- Cabecera "mini-página" ----------
   Para páginas de un nivel jerárquico inferior (una problemática
   específica dentro de un área, no un área en sí). A propósito NO usa
   foto ni la altura de .clon-hero: color plano + migas de pan + icono,
   mucho más compacta, para que quede claro que es contenido "dentro de"
   la página madre y no compita visualmente con ella. */
/* Altura uniforme para que las 5 subpáginas midan exactamente lo
   mismo, sin depender de si el título o el texto caben en un
   renglón — medida para el contenido más largo del grupo (Trastornos
   del neurodesarrollo, 252px). */
.clon-hero-mini { background: var(--hero-color); padding: 28px 0 26px; position: relative; min-height: 252px; display: flex; align-items: center; }
@media (max-width: 767px) { .clon-hero-mini { min-height: 340px; } }
.clon-hero-mini::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--area-color); }
.clon-hero-mini .clon-wrap { max-width: 760px; width: 100%; }
.clon-hero-mini-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--f-titular); font-weight: 600; font-size: 12px; letter-spacing: .02em; margin-bottom: 16px; }
.clon-hero-mini-migas a { color: var(--c-verde-oscuro); opacity: .75; text-decoration: none; }
.clon-hero-mini-migas a:hover { opacity: 1; text-decoration: underline; }
.clon-hero-mini-migas span.sep { color: var(--c-verde-oscuro); opacity: .4; }
.clon-hero-mini-migas span[aria-current] { color: var(--area-color); opacity: 1; }
.clon-hero-mini-cuerpo { display: flex; align-items: flex-start; gap: 18px; }
.clon-hero-mini-icono { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--area-color); }
.clon-hero-mini-icono svg { width: 24px; height: 24px; }
.clon-hero-mini h1 { font-size: 22px; line-height: 1.2; color: var(--c-tinta); margin-bottom: 8px; }
.clon-hero-mini p { font-size: 14.5px; line-height: 1.55; color: var(--c-texto); max-width: 60ch; }
@media (min-width: 700px) { .clon-hero-mini h1 { font-size: 26px; } .clon-hero-mini p { font-size: 15px; } }
@media (max-width: 480px) { .clon-hero-mini-cuerpo { gap: 14px; } .clon-hero-mini-icono { width: 40px; height: 40px; } .clon-hero-mini-icono svg { width: 20px; height: 20px; } }

/* Ritmo vertical más apretado para el cuerpo de las mini-páginas: son
   páginas de contenido más acotado y no deben "respirar" tanto como
   una página de área — refuerza la sensación de jerarquía inferior. */
.clon-bloque.clon-bloque--mini { padding: 36px 0; }
@media (min-width: 900px) { .clon-bloque.clon-bloque--mini { padding: 48px 0; } }

/* Fila "Emocional / Conductual / Cognitivo / Social" de la intro de
   Psicología infantil: iconos pequeños, integrados junto al texto (no
   flotando debajo, centrados, generando hueco vertical). */
.clon-intro-conicono { display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 860px) { .clon-intro-conicono { display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: center; } }
.clon-infantil-areas { display: flex; flex-wrap: wrap; gap: 12px 26px; }
@media (min-width: 860px) { .clon-infantil-areas { display: grid; grid-template-columns: repeat(2, auto); gap: 14px 28px; } }
.clon-infantil-areas-item { display: flex; align-items: center; gap: 10px; }
.clon-infantil-areas-icono { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--item-color); display: flex; align-items: center; justify-content: center; color: var(--item-color); flex-shrink: 0; }
.clon-infantil-areas-icono svg { width: 16px; height: 16px; }
.clon-infantil-areas-label { font-family: var(--f-titular); font-weight: 600; font-size: 13px; color: var(--c-tinta); white-space: nowrap; }

/* ---------- Bloques genéricos ---------- */
.clon-bloque { padding: 64px 0; }
@media (min-width: 900px) { .clon-bloque { padding: 96px 0; } }
.clon-cabecera { max-width: 640px; margin-bottom: 40px; }
.clon-etiqueta-seccion {
  display: inline-block;
  font-family: var(--f-titular);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-mostaza);
  margin-bottom: 12px;
}
.clon-bloque h2 { font-size: 28px; color: var(--c-verde-oscuro); line-height: 1.2; }
@media (min-width: 700px) { .clon-bloque h2 { font-size: 34px; } }
.clon-bloque .clon-intro { color: var(--c-texto); font-size: 16px; line-height: 1.6; margin-top: 14px; }

/* ---------- Servicios (tarjetas de área) ----------
   Es la sección con más peso de la portada: cada tarjeta lleva su propio
   icono en una insignia de color, un tinte de fondo sutil del color del
   servicio y un borde superior más grueso — así el color de cada área
   se lee de un vistazo, no solo en un filete fino. -------------------- */
.clon-grid-areas { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .clon-grid-areas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .clon-grid-areas { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .clon-grid-areas--4 { grid-template-columns: repeat(4, 1fr) !important; } }
/* Si el número de especialidades deja una sola tarjeta suelta en la
   última fila (p. ej. al añadir Terapia Ocupacional más adelante),
   esa tarjeta se centra en vez de quedar sola pegada a la izquierda.
   Autoajustable: no hay que tocar esto cada vez que se añada o quite
   una especialidad. */
@media (min-width: 640px) and (max-width: 1079px) {
  .clon-grid-areas:not(.clon-grid-areas--4) > *:last-child:nth-child(2n+1) { grid-column: 1 / -1; max-width: calc(50% - 11px); justify-self: center; }
}
@media (min-width: 1080px) {
  .clon-grid-areas:not(.clon-grid-areas--4) > *:last-child:nth-child(3n+1) { grid-column: 1 / -1; max-width: calc(33.333% - 15px); justify-self: center; }
}

.clon-area {
  background: var(--c-area-bg);
  background: color-mix(in srgb, var(--area-color, var(--c-mostaza)) 6%, var(--c-area-bg));
  border-radius: 12px;
  padding: 20px 20px 18px;
  border-top: 4px solid var(--area-color, var(--c-mostaza));
  transition: transform .2s ease, box-shadow .2s ease;
}
/* La tarjeta entera es un enlace (además del "Ver más") */
a.clon-area { display: block; text-decoration: none; color: inherit; }
.clon-area:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -20px rgba(36,50,42,.4); }
.clon-area-icono {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--area-color, var(--c-mostaza)) 16%, #fff);
  color: var(--area-color, var(--c-mostaza));
  margin-bottom: 12px;
  transition: transform .2s ease;
}
.clon-area-icono svg { width: 18px; height: 18px; }
.clon-area:hover .clon-area-icono { transform: scale(1.08); }
.clon-area h3 { font-size: 16px; color: var(--area-color, var(--c-tinta)); margin-bottom: 5px; }
.clon-area p { color: var(--c-texto); font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
.clon-area .clon-ver { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-titular); font-weight: 600; font-size: 12.5px; color: var(--area-color, var(--c-verde-oscuro)); transition: gap .15s ease; }
.clon-area:hover .clon-ver { gap: 10px; }

/* ---------- Franjas grandes con expansión (página de Servicios) ----------
   Recurso propio de servicios/index.html, distinto de las tarjetas
   .clon-area que usan Inicio y los hubs de cada especialidad. Cada fila
   se expande al pasar el ratón (o al tocar, en pantallas sin hover)
   revelando color propio, una descripción algo más larga y, cuando la
   especialidad tiene varias páginas reales, acceso directo a cada una.
   La animación usa la técnica grid-template-rows 0fr→1fr, que anima a
   "altura automática" sin fijar un alto en píxeles. */
.clon-servicios-grandes { display: flex; flex-direction: column; gap: 14px; }
.clon-servicio-fila {
  border-radius: 20px;
  background: color-mix(in srgb, var(--area-color) 4%, #fff);
  border: 1px solid var(--c-linea);
  transition: box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.clon-servicio-fila:hover,
.clon-servicio-fila.abierta,
.clon-servicio-fila:focus-within {
  border-color: transparent;
  background: color-mix(in srgb, var(--area-color) 7%, #fff);
  box-shadow: 0 26px 52px -26px rgba(36,50,42,.38);
}
.clon-servicio-cabecera {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 24px 26px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.clon-servicio-icono {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--area-color) 16%, #fff);
  color: var(--area-color);
  transition: transform .35s ease;
}
.clon-servicio-fila:hover .clon-servicio-icono,
.clon-servicio-fila.abierta .clon-servicio-icono { transform: scale(1.1) rotate(-6deg); }
.clon-servicio-icono svg { width: 26px; height: 26px; }
.clon-servicio-titulo { flex: 1; min-width: 0; }
.clon-servicio-titulo h3 { font-size: 20px; color: var(--c-tinta); margin-bottom: 3px; }
.clon-servicio-titulo p { font-size: 13.5px; color: var(--c-texto-suave); }
.clon-servicio-flecha {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--area-color) 12%, #fff);
  color: var(--area-color);
  transition: background .3s ease, color .3s ease;
}
.clon-servicio-flecha svg { width: 13px; height: 13px; transition: transform .35s ease; }
.clon-servicio-fila:hover .clon-servicio-flecha,
.clon-servicio-fila.abierta .clon-servicio-flecha { background: var(--area-color); color: #fff; }
.clon-servicio-fila:hover .clon-servicio-flecha svg,
.clon-servicio-fila.abierta .clon-servicio-flecha svg { transform: rotate(90deg); }

.clon-servicio-detalle { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.clon-servicio-fila:hover .clon-servicio-detalle,
.clon-servicio-fila.abierta .clon-servicio-detalle,
.clon-servicio-fila:focus-within .clon-servicio-detalle { grid-template-rows: 1fr; }
.clon-servicio-detalle-interior { overflow: hidden; }
.clon-servicio-detalle-interior > div {
  padding: 4px 26px 26px 104px;
  border-top: 1px solid color-mix(in srgb, var(--area-color) 18%, transparent);
  margin-top: 4px;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.clon-servicio-detalle p.clon-servicio-desc { flex-basis: 100%; font-size: 14px; color: var(--c-texto); line-height: 1.6; margin-bottom: 4px; }
.clon-servicio-chip {
  display: inline-flex; align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--c-linea);
  font-family: var(--f-titular); font-weight: 600; font-size: 13.5px;
  color: var(--c-tinta);
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.clon-servicio-chip:hover { background: var(--area-color); border-color: var(--area-color); color: #fff; transform: translateY(-2px); }
/* Variante NO clicable: para especialidades sin subpáginas propias, un
   desglose informativo de lo que ofrecen. Borde discontinuo y relleno
   muy tenue para que se distinga a simple vista de los chips de arriba
   (sólidos, con hover) que sí llevan a otra página. */
.clon-servicio-chip-info {
  display: inline-flex; align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--area-color) 7%, #fff);
  border: 1px dashed color-mix(in srgb, var(--area-color) 45%, var(--c-linea));
  font-family: var(--f-titular); font-weight: 600; font-size: 13.5px;
  color: var(--c-texto);
}
.clon-servicio-desc-nota { flex-basis: 100%; font-size: 12.5px; color: var(--c-texto-suave); font-style: italic; margin: -6px 0 2px; }
.clon-servicio-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-titular); font-weight: 700; font-size: 13.5px;
  color: var(--area-color);
  text-decoration: none;
  margin-left: auto;
  transition: gap .15s ease;
}
.clon-servicio-cta:hover { gap: 10px; }
@media (max-width: 640px) {
  .clon-servicio-cabecera { padding: 20px 18px; gap: 14px; }
  .clon-servicio-icono { width: 46px; height: 46px; }
  .clon-servicio-icono svg { width: 21px; height: 21px; }
  .clon-servicio-titulo h3 { font-size: 17px; }
  .clon-servicio-detalle-interior > div { padding-left: 18px; padding-right: 18px; }
  .clon-servicio-cta { margin-left: 0; }
}

/* ---------- Camino de etapas (página general de Psicología) ----------
   Recurso propio de servicios/psicologia.html para elegir entre las 4
   áreas (Infancia/Perinatal/Adultos/Familias) sin repetir el patrón de
   cajas — un "camino" horizontal con una parada grande por etapa,
   conectadas por una línea con degradado de los 4 colores. Distinto
   a propósito de las franjas con hover de Servicios y de los pasos
   pequeños .clon-pasos--camino (que son para procesos, no navegación). */
.clon-camino-etapas {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 20px;
  padding-top: 6px;
}
@media (min-width: 600px) { .clon-camino-etapas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .clon-camino-etapas { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .clon-camino-etapas::before {
    content: "";
    position: absolute;
    top: 59px;
    left: 12.5%; right: 12.5%;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg,
      var(--c-area-infancia) 0%, var(--c-area-infancia) 12.5%,
      var(--c-area-perinatal) 37.5%,
      var(--c-area-adultos) 62.5%,
      var(--c-area-familia) 87.5%, var(--c-area-familia) 100%);
    opacity: .3;
  }
}
.clon-etapa {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  padding: 0 6px;
}
.clon-etapa-punto {
  width: 108px; height: 108px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--area-color);
  display: flex; align-items: center; justify-content: center;
  color: var(--area-color);
  box-shadow: 0 16px 34px -20px rgba(36,50,42,.35);
  transition: transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease;
  margin-bottom: 16px;
}
.clon-etapa-punto svg { width: 38px; height: 38px; }
.clon-etapa:hover .clon-etapa-punto,
.clon-etapa:focus-visible .clon-etapa-punto {
  transform: translateY(-6px) scale(1.06);
  background: var(--area-color);
  color: #fff;
  box-shadow: 0 26px 44px -18px rgba(36,50,42,.42);
}
.clon-etapa-nombre { font-family: var(--f-titular); font-weight: 600; font-size: 16.5px; color: var(--c-tinta); margin-bottom: 6px; transition: color .2s ease; }
.clon-etapa:hover .clon-etapa-nombre, .clon-etapa:focus-visible .clon-etapa-nombre { color: var(--area-color); }
.clon-etapa-desc { font-size: 13px; color: var(--c-texto-suave); line-height: 1.55; max-width: 24ch; }
.clon-etapa-ver { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-family: var(--f-titular); font-weight: 700; font-size: 12.5px; color: var(--area-color); transition: gap .15s ease; }
.clon-etapa:hover .clon-etapa-ver { gap: 9px; }

/* ---------- "¿Qué te trae por aquí?" — acceso por necesidad ----------
   Lista de filas divididas por un filete, en vez de tarjetas — para no
   repetir justo debajo el mismo recurso de icono+tarjeta que la
   rejilla de Servicios de arriba. El icono conserva el color propio
   de cada especialidad vía --item-color. */
.clon-necesidades { display: grid; gap: 0; grid-template-columns: 1fr; margin-top: 8px; border-top: 1px solid var(--c-linea); }
@media (min-width: 780px) { .clon-necesidades { grid-template-columns: repeat(2, 1fr); column-gap: 48px; border-top: none; } }
.clon-necesidad {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--c-linea);
}
@media (min-width: 780px) { .clon-necesidades .clon-necesidad { border-top: 1px solid var(--c-linea); } }
.clon-necesidad-icono {
  flex: none;
  width: 32px; height: 32px;
  margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  color: var(--item-color, var(--c-verde-boton));
}
.clon-necesidad-icono svg { width: 23px; height: 23px; }
.clon-necesidad-texto { display: flex; flex-direction: column; gap: 6px; }
.clon-necesidad p { color: var(--c-tinta); font-size: 14.5px; line-height: 1.5; }
.clon-necesidad .clon-ver { font-family: var(--f-titular); font-weight: 600; font-size: 13.5px; color: var(--item-color, var(--c-verde-boton)); display: inline-flex; align-items: center; gap: 6px; transition: gap .15s ease; }
.clon-necesidad:hover .clon-ver { gap: 10px; }

/* ---------- Proceso en pasos ---------- */
.clon-pasos { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 780px) { .clon-pasos { grid-template-columns: repeat(4, 1fr); } }
.clon-paso {
  position: relative;
  padding: 30px 26px 32px;
  border-radius: 16px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.clon-paso:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -22px rgba(36,50,42,.32); }
/* Flecha de continuidad entre pasos, solo en escritorio */
@media (min-width: 780px) {
  .clon-paso:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%; right: -22px;
    width: 14px; height: 14px;
    border-top: 2.5px solid rgba(36,50,42,.18);
    border-right: 2.5px solid rgba(36,50,42,.18);
    transform: translateY(-50%) rotate(45deg);
    z-index: 2;
  }
}
.clon-paso .clon-num {
  position: absolute;
  top: -6px; right: 14px;
  font-family: var(--f-titular);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: rgba(36,50,42,.1);
  pointer-events: none;
}
.clon-paso-icono {
  position: relative;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.65);
  color: var(--c-tinta);
  margin-bottom: 18px;
}
.clon-paso-icono svg { width: 21px; height: 21px; }
.clon-paso h3 { position: relative; font-size: 17px; color: var(--c-tinta); margin-bottom: 8px; }
.clon-paso p { position: relative; font-size: 14px; line-height: 1.55; color: var(--c-tinta); opacity: .8; }

/* ---------- Variante "camino" de los pasos (Psicología infantil) ----------
   Círculos conectados por una línea punteada horizontal, en vez de la
   rejilla de cuadrados por defecto — distingue esta página de las demás
   que también explican "el proceso paso a paso". */
.clon-pasos--camino { position: relative; gap: 34px; }
.clon-pasos--camino .clon-paso { background: transparent !important; padding: 0; text-align: center; }
.clon-pasos--camino .clon-paso:hover { transform: none; box-shadow: none; }
.clon-pasos--camino .clon-paso::after { display: none; }
.clon-pasos--camino .clon-num { display: none; }
.clon-pasos--camino .clon-paso-icono {
  position: relative; width: 62px; height: 62px; margin: 0 auto 16px;
  background: #fff; border: 3px solid var(--area-color, var(--c-verde-boton));
  color: var(--area-color, var(--c-verde-boton));
  box-shadow: 0 10px 22px -12px rgba(36,50,42,.3);
}
.clon-pasos--camino .clon-paso-icono svg { width: 25px; height: 25px; }
@media (min-width: 780px) {
  .clon-pasos--camino::before {
    content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 31px;
    border-top: 2.5px dashed color-mix(in srgb, var(--area-color, var(--c-verde-boton)) 45%, transparent);
    z-index: 0;
  }
}
/* .clon-pasos base fuerza 4 columnas — para un camino de 3 pasos hace
   falta esta variante, o la línea apunta a una 4ª columna vacía sin
   círculo (el bug de Trastornos del neurodesarrollo). */
@media (min-width: 780px) {
  .clon-pasos--camino-3 { grid-template-columns: repeat(3, 1fr); }
  .clon-pasos--camino-3.clon-pasos--camino::before { left: 16.667%; right: 16.667%; }
}
.clon-pasos--camino h3 { font-size: 15.5px; }
.clon-pasos--camino p { font-size: 13.5px; opacity: .75; }

/* ---------- Variante "numerada" de los pasos (Dificultades de aprendizaje) ----------
   Lista vertical con número en círculo y línea divisoria — más cercana
   a un listado explicativo que a tarjetas. */
.clon-pasos--numerada { grid-template-columns: 1fr; gap: 0; }
.clon-pasos--numerada .clon-paso {
  background: transparent !important; padding: 22px 4px; border-radius: 0;
  display: flex; gap: 20px; align-items: flex-start;
  border-bottom: 1px solid var(--c-linea);
}
.clon-pasos--numerada .clon-paso:last-child { border-bottom: none; }
.clon-pasos--numerada .clon-paso:hover { transform: none; box-shadow: none; }
.clon-pasos--numerada .clon-paso::after { display: none; }
.clon-pasos--numerada .clon-num {
  position: relative; top: 0; right: 0; flex: none;
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 16px; color: #fff;
  background: var(--area-color, var(--c-verde-boton));
}
.clon-pasos--numerada .clon-paso-icono { display: none; }
.clon-pasos--numerada h3 { font-size: 16px; margin-bottom: 4px; }
.clon-pasos--numerada p { font-size: 14px; }

/* ---------- Variante "filas" de los pasos (Psicología perinatal) ----------
   Filas horizontales con icono grande a un lado, sobre fondo suave —
   tercera composición distinta para no repetir el mismo bloque visual. */
.clon-pasos--filas { grid-template-columns: 1fr; gap: 16px; }
.clon-pasos--filas .clon-paso {
  background: var(--c-area-bg) !important; padding: 22px 24px; border-radius: 14px;
  display: flex; gap: 20px; align-items: center; text-align: left;
}
.clon-pasos--filas .clon-paso::after { display: none; }
.clon-pasos--filas .clon-num { position: relative; top: 0; right: 0; flex: none; font-size: 38px; color: color-mix(in srgb, var(--area-color, var(--c-verde-boton)) 35%, transparent); }
.clon-pasos--filas .clon-paso-icono { flex: none; margin-bottom: 0; width: 50px; height: 50px; background: #fff; color: var(--area-color, var(--c-verde-boton)); }

/* ---------- Lista con icono (genérica) ----------
   Mini-tarjetas de icono + texto para sustituir listas de viñetas por
   un recurso más gráfico. El color se ajusta con --item-color. */
.clon-lista-icono { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 10px; }
@media (min-width: 640px) { .clon-lista-icono { grid-template-columns: repeat(2, 1fr); } }
.clon-item-icono {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border-radius: 12px; padding: 15px 18px;
  border: 1px solid var(--c-linea);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.clon-item-icono:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(36,50,42,.3); border-color: transparent; }
.clon-item-icono-icono {
  flex: none; width: 36px; height: 36px; margin-top: 1px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--item-color, var(--c-verde-boton)) 15%, #fff);
  color: var(--item-color, var(--c-verde-boton));
}
.clon-item-icono-icono svg { width: 17px; height: 17px; }
.clon-item-icono p { font-size: 13.5px; color: var(--c-tinta); line-height: 1.45; margin: 0; }

/* ---------- Destacado (frase/concepto clave) ----------
   Alternativa editorial a las tarjetas de icono — una cita o idea
   central resaltada con un simple filete de color, sin icono ni
   fondo, para dar ritmo a páginas que ya usan otros recursos. */
.clon-destacado { border-left: 3px solid var(--area-color, var(--c-verde-boton)); padding: 2px 0 2px 22px; }
.clon-destacado p { font-family: var(--f-titular); font-weight: 500; font-size: 19px; line-height: 1.45; color: var(--c-tinta); margin: 0; }
@media (min-width: 700px) { .clon-destacado p { font-size: 23px; } }

/* ---------- Dos columnas genérico ----------
   Grid responsive para bloques editoriales a dos columnas (texto +
   destacado, texto + lista, avatar + bio...). En móvil siempre se
   apila en una columna; en escritorio usa las proporciones que se le
   pasen con --col-a/--col-b (por defecto 1fr 1fr). */
.clon-2col { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 780px) { .clon-2col { grid-template-columns: var(--col-a, 1fr) var(--col-b, 1fr); gap: var(--col-gap, 40px); } }

/* ---------- Lista limpia (sin icono) ----------
   Viñeta simple de punto de color — para listas de contenido dentro
   de bloques editoriales, sin repetir el recurso de icono+tarjeta. */
.clon-lista-limpia { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.clon-lista-limpia li { list-style: none; position: relative; padding-left: 20px; font-size: 15px; line-height: 1.55; color: var(--c-texto); }
.clon-lista-limpia li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--item-color, var(--c-verde-boton)); }
.clon-lista-limpia b { color: var(--c-tinta); }

/* ---------- Aspectos editorial (filas etiqueta grande + texto) ----------
   Alternativa a la cuadrícula de tarjetas para presentar varios
   bloques temáticos — una etiqueta en tipografía grande a la
   izquierda, el texto a la derecha, separadas por una línea. Distinto
   tanto de la nube de palabras como de las tarjetas horizontales, para
   no repetir el mismo recurso entre páginas de la misma especialidad. */
.clon-aspectos-editorial { display: flex; flex-direction: column; }
.clon-aspecto-fila { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--c-linea); }
.clon-aspecto-fila:last-child { border-bottom: none; padding-bottom: 0; }
.clon-aspecto-fila:first-child { padding-top: 0; }
.clon-aspecto-etiqueta { font-family: var(--f-titular); font-weight: 700; font-size: 28px; line-height: 1; }
.clon-aspecto-fila p { font-size: 14.5px; color: var(--c-texto); line-height: 1.65; margin: 0; }
@media (min-width: 780px) {
  .clon-aspecto-fila { grid-template-columns: 230px 1fr; align-items: baseline; gap: 28px; padding: 28px 0; }
}

/* ---------- Recurso destacado (p.ej. Instagram de una profesional) ----------
   Bloque propio para invitar a un recurso externo con presencia real,
   sin que parezca un enlace suelto: icono en círculo, etiqueta + título
   + texto breve, y un CTA con forma de botón. Fondo en degradado suave
   del color del área — nunca la paleta de marca del recurso externo,
   para no romper la identidad de Serea dentro de su propia página. */
.clon-recurso-destacado {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  text-align: center;
  padding: 40px 32px;
  border-radius: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--area-color, var(--c-verde-boton)) 40%, #fff), color-mix(in srgb, var(--area-color, var(--c-verde-boton)) 14%, #fff));
}
.clon-recurso-destacado-icono {
  width: 60px; height: 60px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: var(--area-color, var(--c-verde-boton)); margin: 0 auto;
  box-shadow: 0 10px 22px -14px rgba(36,50,42,.3);
}
.clon-recurso-destacado-etiqueta { display: block; font-family: var(--f-titular); font-weight: 600; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--area-color, var(--c-verde-boton)); }
.clon-recurso-destacado h3 { font-family: var(--f-titular); font-weight: 600; font-size: 21px; color: var(--c-tinta); margin: 8px 0 10px; }
.clon-recurso-destacado p { font-size: 14.5px; color: var(--c-texto); line-height: 1.6; margin: 0 auto; max-width: 46ch; }
.clon-recurso-destacado .clon-btn { margin: 22px auto 0; background: var(--area-color, var(--c-verde-boton)); }
@media (min-width: 760px) {
  .clon-recurso-destacado { grid-template-columns: auto 1fr auto; text-align: left; align-items: center; gap: 30px; padding: 44px 44px; }
  .clon-recurso-destacado-icono { margin: 0; }
  .clon-recurso-destacado p { margin: 0; }
  .clon-recurso-destacado .clon-btn { margin: 0; flex-shrink: 0; }
}

/* ---------- Conecta con otros servicios ----------
   Bloque pequeño para señalar que, según la necesidad, otras áreas de
   Serea también pueden acompañar — sin fabricar dos tarjetas grandes
   ni mezclar competencias: cada enlace lleva el color propio de SU
   especialidad, con una frase que deja clara la diferencia de rol. */
.clon-conecta-servicios { background: var(--c-area-bg); border-radius: 20px; padding: 28px 30px; }
.clon-conecta-servicios-intro { font-size: 14px; color: var(--c-texto); line-height: 1.6; margin: 0 0 20px; max-width: 68ch; }
.clon-conecta-enlaces { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .clon-conecta-enlaces { grid-template-columns: 1fr 1fr; } }
.clon-conecta-enlace { display: flex; align-items: center; gap: 12px; background: #fff; border-left: 3px solid var(--enlace-color, var(--c-verde-boton)); border-radius: 12px; padding: 14px 16px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.clon-conecta-enlace:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(36,50,42,.35); }
.clon-conecta-enlace-icono { width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--enlace-color, var(--c-verde-boton)) 16%, #fff); color: var(--enlace-color, var(--c-verde-boton)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.clon-conecta-enlace-icono svg { width: 18px; height: 18px; }
.clon-conecta-enlace-texto { min-width: 0; }
.clon-conecta-enlace-texto b { display: block; font-family: var(--f-titular); font-weight: 600; font-size: 14.5px; color: var(--c-tinta); }
.clon-conecta-enlace-texto span { display: block; font-size: 12.5px; color: var(--c-texto-suave); margin-top: 2px; line-height: 1.4; }
.clon-conecta-enlace-flecha { margin-left: auto; color: var(--enlace-color, var(--c-verde-boton)); font-weight: 600; font-size: 15px; flex-shrink: 0; }

/* ---------- Etiquetas (listado visual en píldoras) ----------
   Alternativa a la tarjeta de icono para enumerar motivos o temas
   breves — útil cuando ya se ha usado icono+tarjeta en otro bloque
   de la misma página y conviene variar el recurso. */
.clon-etiquetas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.clon-etiquetas span { display: inline-block; padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--tag-color, var(--c-verde-boton)); color: var(--c-tinta); font-family: var(--f-titular); font-weight: 500; font-size: 14.5px; }

/* ---------- Palabras clave (tamaños variables) ----------
   Lista de conceptos en formato editorial de "nube de palabras" —
   cada término con un tamaño distinto para dar ritmo tipográfico,
   alternativa a la lista con icono cuando el contenido es sobre todo
   una enumeración de términos. */
.clon-palabras-clave { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-family: var(--f-titular); font-weight: 600; color: var(--c-tinta); line-height: 1.5; }

/* ---------- Tres columnas genérico ----------
   Como .clon-2col pero a tres — para listados agrupados por bloques
   temáticos (p. ej. las áreas de la logopedia) sin recurrir a
   icono+tarjeta. En móvil una columna, en tablet dos, en escritorio
   tres. */
.clon-3col { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .clon-3col { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 980px) { .clon-3col { grid-template-columns: repeat(3,1fr); } }

/* ---------- Equipo ---------- */
.clon-equipo-grid { display: grid; gap: 22px; grid-template-columns: 1fr; margin-top: 36px; }
@media (min-width: 640px) { .clon-equipo-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 980px) { .clon-equipo-grid { grid-template-columns: repeat(4,1fr); } }
/* Si el número de profesionales deja una sola ficha suelta en la última
   fila, esa ficha se centra en vez de quedar sola pegada a la izquierda
   — mismo criterio que .clon-grid-areas, autoajustable al añadir o
   quitar profesionales. */
@media (min-width: 640px) and (max-width: 979px) {
  .clon-equipo-grid > *:last-child:nth-child(2n+1) { grid-column: 1 / -1; max-width: calc(50% - 11px); justify-self: center; }
}
@media (min-width: 980px) {
  .clon-equipo-grid > *:last-child:nth-child(4n+1) { grid-column: 1 / -1; max-width: calc(25% - 16.5px); justify-self: center; }
}
.clon-persona { text-align: center; }
.clon-persona .clon-foto {
  width: 108px; height: 108px; border-radius: 50%;
  margin: 0 auto 16px; overflow: hidden; background: var(--c-area-bg);
  display: flex; align-items: center; justify-content: center;
  border: 3px solid #fff; box-shadow: 0 10px 26px -14px rgba(36,50,42,.4);
  transition: box-shadow .18s ease, transform .18s ease;
}
.clon-persona:hover .clon-foto { transform: translateY(-3px); box-shadow: 0 16px 32px -14px rgba(36,50,42,.45); }
.clon-persona .clon-foto img { width: 100%; height: 100%; object-fit: cover; }
.clon-persona .clon-foto .clon-inicial { font-family: var(--f-titular); font-weight: 600; font-size: 28px; color: var(--c-verde-oscuro); }
.clon-persona .clon-nombre { font-family: var(--f-titular); font-weight: 600; font-size: 15.5px; color: var(--c-tinta); }
.clon-persona .clon-rol { font-size: 13.5px; color: var(--c-texto-suave); margin-top: 4px; }
.clon-persona .clon-colegiado { font-family: var(--f-titular); font-weight: 700; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: var(--c-verde-boton); margin-top: 6px; }
.clon-persona .clon-falta { margin-top: 6px; }

/* ---------- Rejilla de áreas con icono (Fisioterapia) ----------
   Seis áreas de trabajo en tarjetas compactas, cada una con su icono —
   composición distinta de las tarjetas grandes de Logopedia. */
.clon-areas-icono { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 36px; }
@media (min-width: 640px) { .clon-areas-icono { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .clon-areas-icono { grid-template-columns: repeat(3, 1fr); } }
.clon-area-fisio { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--c-linea); border-radius: 12px; padding: 16px 18px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.clon-area-fisio:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(36,50,42,.3); border-color: transparent; }
.clon-area-fisio-icono { flex: none; width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--c-area-fisio) 15%, #fff); color: var(--c-area-fisio); display: flex; align-items: center; justify-content: center; }
.clon-area-fisio-icono svg { width: 21px; height: 21px; }
.clon-area-fisio h3 { font-size: 14px; font-weight: 500; color: var(--c-tinta); line-height: 1.35; }
.clon-area-fisio p { font-size: 12.5px; color: var(--c-texto-suave); line-height: 1.4; margin-top: 3px; }
.clon-area-fisio > div { min-width: 0; }

/* ---------- Lista de verificación (Pedagogía) ----------
   Cada punto de trabajo con su check propio — distinta del diagrama de
   Medicina, la ola de Logopedia y la rejilla de Fisioterapia. */
.clon-checklist { display: grid; gap: 4px; margin-top: 8px; }
.clon-check-item { display: flex; gap: 16px; align-items: flex-start; padding: 18px 4px; border-bottom: 1px solid var(--c-linea); }
.clon-check-item:last-child { border-bottom: none; }
.clon-check-icono { flex: none; width: 30px; height: 30px; margin-top: 2px; border-radius: 50%; background: var(--c-area-pedagogia); color: #fff; display: flex; align-items: center; justify-content: center; }
.clon-check-icono svg { width: 16px; height: 16px; }
.clon-check-item h3 { font-family: var(--f-titular); font-weight: 600; font-size: 15px; color: var(--c-tinta); margin-bottom: 3px; }
.clon-check-item p { font-size: 13.5px; color: var(--c-texto-suave); line-height: 1.5; }

/* ---------- Ola decorativa (Logopedia) ----------
   Pequeño recurso propio bajo el hero, con el color de la banda de la
   página — un guiño al sonido/habla sin ser literal ni recargado. */
.clon-ola { line-height: 0; margin-top: -1px; }
.clon-ola svg { width: 100%; height: 26px; display: block; fill: var(--ola-color); }

/* ---------- Diagrama de sistemas (Medicina · PNIe) ----------
   Tres columnas conectadas por una línea discontinua, cada una con su
   icono — recurso propio para explicar visualmente cómo se relacionan
   los tres sistemas, en vez de una simple lista de texto. */
.clon-sistemas { position: relative; display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
@media (min-width: 780px) {
  .clon-sistemas { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .clon-sistemas::before {
    content: "";
    position: absolute;
    top: 30px;
    left: calc(16.66% + 6px);
    right: calc(16.66% + 6px);
    height: 2px;
    background-image: repeating-linear-gradient(90deg, var(--c-area-medicina) 0 8px, transparent 8px 15px);
  }
}
.clon-sistema { position: relative; text-align: center; }
.clon-sistema-icono {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-area-medicina);
  color: var(--c-area-medicina);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  transition: transform .2s ease;
}
.clon-sistema:hover .clon-sistema-icono { transform: scale(1.08); }
.clon-sistema-icono svg { width: 26px; height: 26px; }
.clon-sistema h3 { font-size: 15.5px; color: var(--c-verde-oscuro); margin-bottom: 6px; }
.clon-sistema p { font-size: 13.5px; color: var(--c-texto); line-height: 1.55; max-width: 26ch; margin: 0 auto; }

/* ---------- Áreas clínicas numeradas (Medicina · PNIe) ----------
   Lista de las áreas reales de consulta — círculo numerado + título +
   texto. Recurso propio, distinto del diagrama conceptual de arriba y
   de la lista de verificación de Pedagogía. */
.clon-areas-clinicas { display: flex; flex-direction: column; margin-top: 8px; }
.clon-area-clinica { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--c-linea); align-items: start; }
.clon-area-clinica:first-child { padding-top: 0; }
.clon-area-clinica:last-child { border-bottom: none; padding-bottom: 0; }
.clon-area-clinica-num { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--c-area-medicina) 14%, #fff); color: var(--c-area-medicina); display: flex; align-items: center; justify-content: center; font-family: var(--f-titular); font-weight: 700; font-size: 14px; }
.clon-area-clinica h3 { font-family: var(--f-titular); font-weight: 600; font-size: 16px; color: var(--c-tinta); margin: 0 0 6px; }
.clon-area-clinica p { font-size: 14px; color: var(--c-texto); line-height: 1.6; margin: 0; }

/* ---------- Dos vías de consulta (Medicina · PNIe) ----------
   Primera consulta vs. seguimiento, en dos bloques simples — sin
   precios, solo qué incluye cada una. */
.clon-vias-consulta { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 640px) { .clon-vias-consulta { grid-template-columns: 1fr 1fr; } }
.clon-via-consulta { background: #fff; border-radius: 16px; padding: 26px 28px; border-top: 3px solid var(--c-area-medicina); }
.clon-via-consulta span { display: block; font-family: var(--f-titular); font-weight: 600; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--c-area-medicina); margin-bottom: 8px; }
.clon-via-consulta h3 { font-family: var(--f-titular); font-weight: 600; font-size: 18px; color: var(--c-tinta); margin: 0 0 8px; }
.clon-via-consulta p { font-size: 14px; color: var(--c-texto); line-height: 1.6; margin: 0; }

/* ---------- Tarjetas de servicios (Pedagogía) ----------
   Sustituye la lista de verificación por tarjetas independientes con
   icono en insignia redondeada — más peso visual, sin cambiar el
   contenido. */
.clon-servicios-tarjetas { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 780px) { .clon-servicios-tarjetas { grid-template-columns: repeat(3, 1fr); } }
.clon-servicio-tarjeta { background: #fff; border-radius: 20px; padding: 30px 26px; border: 1px solid var(--c-linea); display: flex; flex-direction: column; gap: 16px; }
.clon-servicio-tarjeta-icono { width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--tarjeta-color, var(--c-verde-boton)) 14%, #fff); color: var(--tarjeta-color, var(--c-verde-boton)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.clon-servicio-tarjeta-icono svg { width: 24px; height: 24px; }
.clon-servicio-tarjeta h3 { font-family: var(--f-titular); font-weight: 600; font-size: 17px; color: var(--c-tinta); margin: 0; }
.clon-servicio-tarjeta p { font-size: 14px; color: var(--c-texto); line-height: 1.6; margin: 0; }

/* ---------- Talleres/temas propuestos (Pedagogía) ----------
   Tarjetas pequeñas con icono, para mostrar temas de ejemplo dentro
   del bloque "Escuela para familias" — no son enlaces ni tienen fecha,
   solo ilustran el tipo de contenido que pueden tratar los talleres. */
.clon-temas-taller { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-top: 8px; }
@media (min-width: 640px) { .clon-temas-taller { grid-template-columns: repeat(3, 1fr); } }
.clon-tema-taller { background: #fff; border-radius: 16px; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.clon-tema-taller-icono { width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--c-area-pedagogia) 14%, #fff); color: var(--c-area-pedagogia); display: flex; align-items: center; justify-content: center; }
.clon-tema-taller-icono svg { width: 18px; height: 18px; }
.clon-tema-taller span { font-family: var(--f-titular); font-weight: 600; font-size: 13.5px; color: var(--c-tinta); line-height: 1.35; }

/* ---------- Etapas de vida (Matrona) ----------
   Los servicios reales agrupados por el momento vital al que
   acompañan — preconcepción, embarazo, posparto y lactancia, salud de
   la mujer en cualquier etapa — en vez de una lista plana. Recurso
   propio, distinto de la rejilla de Fisioterapia y del resto. */
.clon-etapas-matrona { display: grid; gap: 28px; grid-template-columns: 1fr; margin-top: 12px; }
@media (min-width: 860px) { .clon-etapas-matrona { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
.clon-etapa-matrona { border-top: 3px solid var(--c-area-matrona); padding-top: 18px; }
.clon-etapa-matrona-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--c-area-matrona) 15%, #fff); color: var(--c-area-matrona); font-family: var(--f-titular); font-weight: 700; font-size: 13px; margin-bottom: 12px; }
.clon-etapa-matrona h3 { font-family: var(--f-titular); font-weight: 600; font-size: 15.5px; color: var(--c-verde-oscuro); margin: 0 0 12px; }
.clon-etapa-matrona ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.clon-etapa-matrona li { font-size: 13.5px; color: var(--c-texto); line-height: 1.5; padding-left: 14px; position: relative; }
.clon-etapa-matrona li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--c-area-matrona); }

/* ---------- Lista tipo informe (Fisioterapia) ----------
   Sin iconos — título + texto en formato de ficha/informe clínico,
   dos columnas a partir de cierto ancho, separadas por líneas finas.
   Deliberadamente distinto del indicador de edades (que sí usa
   iconos), para que los dos primeros bloques de la página no se
   lean como el mismo componente repetido. Todas las filas comparten
   el mismo tratamiento, sin ninguna destacada sobre las demás. */
.clon-fisio-ficha { display: flex; flex-direction: column; margin-top: 8px; }
.clon-fisio-ficha-item { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--c-linea); }
@media (min-width: 780px) { .clon-fisio-ficha-item { grid-template-columns: 320px 1fr; gap: 28px; align-items: baseline; } }
.clon-fisio-ficha-item:last-child { border-bottom: none; }
.clon-fisio-ficha-item h3 { font-family: var(--f-titular); font-weight: 600; font-size: 15.5px; color: var(--c-tinta); margin: 0; }
.clon-fisio-ficha-item p { font-size: 13.5px; color: var(--c-texto-suave); line-height: 1.5; margin: 0; }

/* ---------- Indicador de edades (Fisioterapia) ----------
   Bebés · niños · adultos, conectados por una línea fina continua —
   iconos cuadrados, distinto del diagrama de círculos con línea
   discontinua de Medicina. Recurso propio y breve, no decorativo. */
.clon-fisio-edades { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 460px; margin: 32px auto 0; }
.clon-fisio-edades::before { content: ""; position: absolute; top: 22px; left: 16%; right: 16%; height: 1px; background: var(--c-linea); z-index: 0; }
.clon-fisio-edad { position: relative; z-index: 1; text-align: center; }
.clon-fisio-edad-icono { width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 1.5px solid var(--c-area-fisio); color: var(--c-area-fisio); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; }
.clon-fisio-edad-icono svg { width: 20px; height: 20px; }
.clon-fisio-edad span { font-family: var(--f-titular); font-weight: 600; font-size: 12.5px; color: var(--c-texto-suave); }

/* ---------- Línea de tiempo vertical (Matrona) ----------
   El proceso como recorrido vertical con marcadores conectados por una
   línea continua — distinto de las filas numeradas de Fisioterapia. */
.clon-matrona-linea { position: relative; max-width: 640px; margin-top: 12px; }
.clon-matrona-linea::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: color-mix(in srgb, var(--c-area-matrona) 30%, #fff); }
.clon-matrona-paso { position: relative; display: flex; gap: 22px; padding-bottom: 40px; }
.clon-matrona-paso:last-child { padding-bottom: 0; }
.clon-matrona-marca { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--c-area-matrona); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--f-titular); font-weight: 700; font-size: 15px; position: relative; z-index: 1; }
.clon-matrona-paso h3 { font-family: var(--f-titular); font-weight: 600; font-size: 17px; color: var(--c-verde-oscuro); margin: 8px 0 6px; }
.clon-matrona-paso p { font-size: 14px; color: var(--c-texto); line-height: 1.6; margin: 0; max-width: 46ch; }

/* ---------- Enfoque en cuadrícula (Educación Social) ----------
   Los 4 conceptos de "Nuestro enfoque" en cuadrícula 2×2 en vez de
   lista vertical apilada — más ritmo dentro de la franja oscura. */
.clon-social-enfoque-grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(255,255,255,.2); }
@media (min-width: 700px) { .clon-social-enfoque-grid { grid-template-columns: 1fr 1fr; gap: 0 40px; } }
.clon-social-enfoque-item { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.2); display: flex; flex-direction: column; gap: 4px; }

/* ---------- FAQ ---------- */
/* Acordeón con icono — inspirado en las cajas desplegables de tu web,
   con un icono propio de cada pregunta a la izquierda del título. El
   color se toma de --faq-acento (cada página lo fija al color de su
   propia área); si no se fija, cae en el mostaza por defecto. */
.clon-faq { --faq-acento: var(--c-mostaza); max-width: 820px; margin-top: 36px; }
.clon-faq details { border-bottom: 1px solid var(--c-linea); border-radius: 10px; transition: background .15s ease; }
.clon-faq details:hover { background: color-mix(in srgb, var(--faq-acento) 5%, transparent); }
.clon-faq summary {
  font-family: var(--f-titular);
  font-weight: 500;
  font-size: 15.5px;
  color: var(--c-tinta);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 10px;
}
.clon-faq summary::-webkit-details-marker { display: none; }
.clon-faq-icono {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--faq-acento) 16%, #fff);
  color: var(--faq-acento);
  transition: transform .25s ease, background .25s ease;
}
.clon-faq-icono svg { width: 18px; height: 18px; }
.clon-faq details[open] .clon-faq-icono { transform: scale(1.1) rotate(-6deg); background: color-mix(in srgb, var(--faq-acento) 30%, #fff); }
.clon-faq-texto { flex: 1; }
.clon-faq summary::after { content: "+"; font-size: 20px; font-weight: 300; color: var(--faq-acento); flex: none; transition: transform .2s ease; }
.clon-faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
.clon-faq .clon-respuesta { color: var(--c-texto); font-size: 14.5px; line-height: 1.65; margin: 0 0 14px 66px; max-width: 62ch; }
.clon-faq .clon-respuesta a { color: var(--c-verde-boton); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.clon-faq .clon-respuesta a:hover { color: var(--c-verde-boton-hover); }

/* ---------- CTA final ---------- */
/* El color del velo es configurable con --cta-color (verde por defecto,
   el de la portada); las páginas interiores lo cambian a su propio
   color para que este bloque no se confunda con el pie de página, que
   siempre es verde oscuro. */
.clon-cta { --cta-color: var(--c-verde-oscuro); position: relative; background: var(--cta-color); background-size: cover; background-position: center; padding: 72px 0; text-align: center; overflow: hidden; }
.clon-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--cta-color) 88%, black 12%),
    color-mix(in srgb, var(--cta-color) 74%, black 6%));
}
/* Variante clara: el velo aclara la foto en vez de oscurecerla, para
   que el color de fondo se vea luminoso de verdad (texto oscuro encima). */
.clon-cta--claro::before {
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--cta-color) 90%, white 10%),
    color-mix(in srgb, var(--cta-color) 78%, white 22%));
}
.clon-cta .clon-wrap { position: relative; z-index: 1; }
.clon-cta .clon-etiqueta-seccion { color: rgba(255,255,255,.8); }
.clon-cta h2 { color: #fff; }
.clon-cta p { color: #E7E4DD; max-width: 54ch; margin: 16px auto 28px; font-size: 16px; line-height: 1.6; }
.clon-cta .clon-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.clon-cta .clon-btn--linea { color: #fff; }
/* Variante clara — mismo criterio que el hero: colores tomados de tu
   web (mostaza claro, rosa...) llevan texto en tinta oscura, no blanco. */
.clon-cta--claro .clon-etiqueta-seccion { color: var(--c-verde-oscuro); opacity: .8; }
.clon-cta--claro h2 { color: var(--c-tinta); }
.clon-cta--claro p { color: var(--c-texto); }
.clon-cta--claro .clon-btn--linea { color: var(--c-tinta); }
.clon-cta--claro .clon-btn--linea:hover { background: var(--c-tinta); border-color: var(--c-tinta); color: #fff; }

/* ---------- Ubicación ---------- */
.clon-ubicacion-grid { display: grid; gap: 32px; grid-template-columns: 1fr; margin-top: 36px; }
@media (min-width: 900px) { .clon-ubicacion-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.clon-mapa { min-height: 300px; background: var(--c-area-bg); border-radius: var(--radio); overflow: hidden; }
.clon-mapa iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; }
.clon-ubicacion-datos .clon-fila { margin-bottom: 18px; font-size: 15.5px; color: var(--c-texto); }
.clon-ubicacion-datos .clon-fila b { display: block; font-family: var(--f-titular); font-weight: 600; color: var(--c-verde-oscuro); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.clon-ubicacion-datos a:not(.clon-btn) { color: var(--c-verde-boton); font-weight: 600; }

/* ---------- Pie ---------- */
.clon-footer { background: var(--c-verde-pie); color: #fff; padding: 64px 0 0; text-align: center; }
.clon-footer .clon-logo-simbolo { width: 50px; margin: 0 auto 18px; filter: brightness(0) invert(1); opacity: .95; }
.clon-footer .clon-nombre { font-family: var(--f-titular); font-weight: 600; font-size: 19px; margin-bottom: 18px; }
.clon-footer .clon-redes { display: flex; justify-content: center; gap: 18px; margin-bottom: 22px; }
.clon-footer .clon-redes a { color: #fff; opacity: .85; }
.clon-footer .clon-redes a:hover { opacity: 1; }
.clon-footer .clon-datos { font-size: 14.5px; line-height: 2; color: #D7E0D9; margin-bottom: 26px; }
.clon-footer .clon-datos a { color: #D7E0D9; }
.clon-footer-legal { border-top: 1px solid rgba(255,255,255,.14); padding: 18px 0; font-size: 12.5px; color: #A9BAB0; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }

/* ---------- Mini-hero de páginas interiores ----------
   Por defecto, banda mostaza (color reservado para páginas interiores,
   no la portada), solo texto centrado. El modificador --foto añade una
   fotografía de fondo con velo oscuro, para páginas como Equipo donde
   una foto real cuenta más que un color plano. */
.clon-hero-simple { position: relative; background: var(--c-mostaza); padding: 52px 0 58px; text-align: center; overflow: hidden; }
.clon-hero-simple .clon-etiqueta { display: inline-block; font-family: var(--f-titular); font-weight: 600; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: #fff; opacity: .85; margin-bottom: 14px; }
.clon-hero-simple h1 { color: #fff; font-size: 32px; line-height: 1.15; }
@media (min-width: 700px) { .clon-hero-simple h1 { font-size: 40px; } }
.clon-hero-simple p { color: rgba(255,255,255,.92); max-width: 56ch; margin: 16px auto 0; font-size: 16px; line-height: 1.6; }
.clon-hero-simple--foto { background-color: var(--c-verde-oscuro); background-size: cover; background-position: center; padding: 68px 0 76px; }
.clon-hero-simple--foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(36,50,42,.88) 0%, rgba(36,50,42,.7) 55%, rgba(36,50,42,.55) 100%); }
.clon-hero-simple--foto .clon-wrap { position: relative; z-index: 1; }
/* Variante lisa en verde corporativo — mismo verde del hero de portada,
   para páginas interiores sin foto de equipo (evita el amarillo y evita
   usar la foto de una sola persona como si fuera de todo el equipo). */
.clon-hero-simple--marca { background: var(--c-verde-oscuro); }

/* ---------- Equipo (fichas completas) ---------- */
.clon-equipo-completo { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .clon-equipo-completo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .clon-equipo-completo { grid-template-columns: repeat(3, 1fr); } }
.clon-persona-full {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid var(--c-linea);
  border-top: 4px solid var(--c-equipo);
  border-radius: 16px;
  padding: 32px 26px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.clon-persona-full:hover { transform: translateY(-5px); box-shadow: 0 22px 42px -24px rgba(36,50,42,.32); }
.clon-persona-full .clon-foto {
  width: 116px; height: 116px; border-radius: 50%;
  margin-bottom: 18px; overflow: hidden; background: var(--c-area-bg);
  display: flex; align-items: center; justify-content: center;
  border: 3px solid #fff; box-shadow: 0 10px 26px -14px rgba(36,50,42,.4);
}
.clon-persona-full .clon-foto img { width: 100%; height: 100%; object-fit: cover; }
.clon-persona-full .clon-foto .clon-inicial { font-family: var(--f-titular); font-weight: 600; font-size: 32px; color: var(--c-verde-oscuro); }
.clon-persona-full .clon-nombre { font-family: var(--f-titular); font-weight: 600; font-size: 17.5px; color: var(--c-tinta); }
.clon-persona-full .clon-rol { font-size: 14px; color: var(--c-texto-suave); margin-top: 4px; margin-bottom: 12px; }
.clon-persona-full .clon-colegiado { font-family: var(--f-titular); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--c-equipo); margin-bottom: 6px; }
.clon-persona-full .clon-formacion { font-size: 13px; color: var(--c-texto); line-height: 1.5; margin-bottom: 20px; }
.clon-persona-full .clon-btn-cita { margin-top: auto; font-size: 14px; padding: 12px 22px; }
.clon-persona-full .clon-btn-cita svg { width: 16px; height: 16px; }

/* ---------- Teléfono integrado en el botón de WhatsApp ----------
   El número de un profesional ya no flota suelto debajo del botón:
   va dentro del propio botón verde, como segunda línea más pequeña.
   Todo el bloque (icono, texto, número) es un único enlace de
   WhatsApp — pulsar en cualquier punto abre el mismo chat. Botones sin
   número (p. ej. "Reserva tu cita online") no llevan .clon-btn-texto
   y siguen mostrando solo su etiqueta, en una línea. */
.clon-btn-texto { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.clon-tel-visible { display: block; font-size: .81em; font-weight: 500; opacity: .85; }

/* Cuando una persona tiene dos vías de contacto (p.ej. Doctoralia + WhatsApp) */
.clon-contacto-fila { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.clon-contacto-fila .clon-btn { font-size: 12.5px; padding: 10px 12px; gap: 6px; }
.clon-contacto-fila .clon-btn svg { width: 14px; height: 14px; }

/* ---------- Línea de proceso vertical ----------
   Alternativa a .clon-pasos (cuadrados de color) para páginas donde
   ese recurso ya se usa en otro sitio próximo (p. ej. Inicio) — una
   línea vertical con paradas numeradas, en un único color propio de
   la página, para que no se lea como el mismo componente repetido. */
.clon-linea-proceso { position: relative; margin-top: 12px; }
.clon-linea-proceso::before { content: ""; position: absolute; left: 23px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(to bottom, var(--area-color), color-mix(in srgb, var(--area-color) 25%, transparent)); }
.clon-linea-item { position: relative; padding-left: 66px; padding-bottom: 36px; }
.clon-linea-item:last-child { padding-bottom: 0; }
.clon-linea-punto { position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--area-color); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--f-titular); font-weight: 700; font-size: 17px; box-shadow: 0 10px 22px -12px rgba(36,50,42,.45); }
.clon-linea-item h3 { font-family: var(--f-titular); font-weight: 600; font-size: 16px; color: var(--c-tinta); margin-bottom: 6px; }
.clon-linea-item p { font-size: 14px; color: var(--c-texto); line-height: 1.55; max-width: 56ch; }

/* ---------- Bloque de texto + foto ----------
   Para romper tramos muy cargados de listas de iconos con una foto
   real — texto a un lado, foto al otro, apiladas en móvil. La
   variante --invertido cambia el orden en escritorio para que dos
   páginas próximas no usen exactamente la misma composición. */
.clon-texto-foto { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 780px) { .clon-texto-foto { grid-template-columns: 1.1fr .9fr; } }
.clon-texto-foto img { width: 100%; height: 100%; max-height: 380px; border-radius: 20px; object-fit: cover; box-shadow: 0 22px 42px -24px rgba(36,50,42,.35); }
@media (min-width: 780px) { .clon-texto-foto--invertido { grid-template-columns: .9fr 1.1fr; } }
.clon-texto-foto--invertido .clon-texto-foto-img { order: -1; }

/* ---------- Varios profesionales en una misma página ----------
   Cuando una página de servicio implica a más de una disciplina
   (p. ej. Psicología + Pedagogía), cada profesional va en su propia
   tarjeta delimitada, con su propia etiqueta de disciplina y sus
   propios botones — nunca compartidos ni ambiguos sobre quién es
   quién. En escritorio, dos columnas lado a lado; en móvil, apiladas. */
.clon-profesionales-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 20px; align-items: stretch; }
@media (min-width: 640px) { .clon-profesionales-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.clon-profesional-card { background: #fff; border: 1px solid var(--c-linea); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; }
.clon-profesional-header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.clon-profesional-foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; background: var(--c-area-bg); }
.clon-profesional-foto-inicial { width: 64px; height: 64px; border-radius: 50%; flex: none; background: var(--c-area-bg); display: flex; align-items: center; justify-content: center; font-family: var(--f-titular); font-weight: 600; font-size: 22px; color: var(--tag-color, var(--c-verde-oscuro)); }
.clon-profesional-tag { display: inline-block; font-family: var(--f-titular); font-weight: 700; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tag-color) 15%, #fff); color: var(--tag-color); margin-bottom: 6px; }
.clon-profesional-nombre { font-family: var(--f-titular); font-weight: 600; font-size: 15.5px; color: var(--c-tinta); }
.clon-profesional-rol { font-size: 12.5px; color: var(--c-texto-suave); margin-top: 2px; }
.clon-profesional-formacion { font-size: 12.5px; color: var(--c-texto); line-height: 1.5; margin: 8px 0 16px; }
.clon-profesional-botones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.clon-profesional-botones .clon-btn { font-size: 12.5px; padding: 10px 12px; gap: 6px; }
.clon-profesional-botones .clon-btn svg { width: 14px; height: 14px; }
.clon-profesional-nota { font-size: 12.5px; color: var(--c-texto-suave); line-height: 1.55; margin-top: 14px; }

/* Avisos temporales de datos que faltan — solo para la fase de borrador,
   se quitan antes de publicar (ver checklist en PENDIENTES-EQUIPO.md). */
.clon-falta {
  display: inline-block;
  color: #C22525;
  background: #FBEAEA;
  font-family: var(--f-cuerpo);
  font-weight: 700;
  font-size: 11.5px;
  line-height: 1.4;
  padding: 3px 9px;
  border-radius: 5px;
  max-width: 100%;
}