/* ==========================================================================
   CORPORACIÓN DESARROLLO Y DIGNIDAD — Sistema de diseño
   Hoja única de los widgets de Elementor · Agencia GL
   --------------------------------------------------------------------------
   Estructura del archivo:
     01. Tokens (color, tipografía, espacio, radios, sombras)
     02. Reset y base
     03. Utilidades de layout
     04. Componentes base (botones, etiquetas, pétalos)
     05. Topbar + Header/Nav
     06. Hero
     07. Franja lema
     08. Quiénes somos
     09. Servicios
     10. Contacto (formulario + datos + mapa)
     11. Footer + WhatsApp flotante
     12. Responsive
   ========================================================================== */


/* ==========================================================================
   01. TOKENS
   Los 4 colores de pétalo del logo = las 4 líneas de acción.
   Cada uno tiene par "wash" (fondo) y "deep" (texto/acento, contraste AA).
   ========================================================================== */

:root {
  /* --- Identidad --- */
  --ink:            #343B48;   /* gris oscuro, titulares */
  --ink-2:          #444D5E;
  --azul-inst:      #1D4E8F;   /* azul institucional (evolución del actual) */
  --azul-inst-alt:  #16407A;

  /* --- Pétalos del logo --- */
  --petalo-verde-soft:    #BAE7B4;
  --petalo-verde-wash:    #EEF8EC;
  --petalo-verde-deep:    #2C7A52;

  --petalo-azul-soft:     #A4D8F4;
  --petalo-azul-wash:     #EAF5FC;
  --petalo-azul-deep:     #1B6A9C;

  --petalo-amarillo-soft: #FFED7C;
  --petalo-amarillo-wash: #FDF7DD;
  --petalo-amarillo-deep: #8A6410;

  --petalo-rosa-soft:     #FC97C4;
  --petalo-rosa-wash:     #FDEDF4;
  --petalo-rosa-deep:     #B33C76;

  /* --- Neutros (sesgo azul, no gris puro) --- */
  --paper:      #FBFCFE;
  --surface:    #FFFFFF;
  --mist:       #EEF2F8;
  --mist-2:     #E4EBF5;
  --line:       #DCE4EF;
  --line-soft:  #E9EEF6;
  --text:       #1C2438;
  --muted:      #5A678A;

  /* --- Estados --- */
  --focus:      #1D4E8F;

  /* --- Tipografía --- */
  --font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(2.1rem, 1.5rem + 2.3vw, 3rem);
  --fs-h2:      clamp(1.85rem, 1.35rem + 2.1vw, 2.85rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-body:    1.0625rem;
  --fs-lead:    clamp(1.09rem, 1.02rem + 0.35vw, 1.25rem);
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  /* --- Espacio --- */
  --gutter:     clamp(1rem, 0.4rem + 2.4vw, 2.5rem);
  --section-y:  clamp(4.5rem, 2.8rem + 5.5vw, 7rem);
  --container:  1180px;
  --container-narrow: 760px;

  /* --- Forma --- */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 33, 58, .05), 0 2px 8px rgba(20, 33, 58, .04);
  --shadow-md: 0 4px 12px rgba(20, 33, 58, .06), 0 14px 34px rgba(20, 33, 58, .07);
  --shadow-lg: 0 8px 20px rgba(20, 33, 58, .08), 0 28px 60px rgba(20, 33, 58, .10);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --- Tema oscuro: sólo se redefinen tokens, nunca componentes --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:      #EAF0FA;
    --ink-2:    #C3CFE6;
    --azul-inst:     #7FB2E8;
    --azul-inst-alt: #A2C8F0;

    --petalo-verde-wash:    #16281F;
    --petalo-verde-deep:    #8FD9AC;
    --petalo-azul-wash:     #12242F;
    --petalo-azul-deep:     #8CCBEC;
    --petalo-amarillo-wash: #2A2512;
    --petalo-amarillo-deep: #EBD277;
    --petalo-rosa-wash:     #2B1723;
    --petalo-rosa-deep:     #F4A5CA;

    --paper:     #0E1522;
    --surface:   #141D2E;
    --mist:      #182233;
    --mist-2:    #1E2A3E;
    --line:      #2A3853;
    --line-soft: #223049;
    --text:      #E5EBF6;
    --muted:     #9DABC6;

    --focus:     #8CC0F5;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, .40);
    --shadow-lg: 0 14px 44px rgba(0, 0, 0, .50);
  }
}

:root[data-theme="dark"] {
  --ink:      #EAF0FA;
  --ink-2:    #C3CFE6;
  --azul-inst:     #7FB2E8;
  --azul-inst-alt: #A2C8F0;

  --petalo-verde-wash:    #16281F;
  --petalo-verde-deep:    #8FD9AC;
  --petalo-azul-wash:     #12242F;
  --petalo-azul-deep:     #8CCBEC;
  --petalo-amarillo-wash: #2A2512;
  --petalo-amarillo-deep: #EBD277;
  --petalo-rosa-wash:     #2B1723;
  --petalo-rosa-deep:     #F4A5CA;

  --paper:     #0E1522;
  --surface:   #141D2E;
  --mist:      #182233;
  --mist-2:    #1E2A3E;
  --line:      #2A3853;
  --line-soft: #223049;
  --text:      #E5EBF6;
  --muted:     #9DABC6;

  --focus:     #8CC0F5;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .40);
  --shadow-lg: 0 14px 44px rgba(0, 0, 0, .50);
}


/* ==========================================================================
   02. RESET Y BASE
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--azul-inst);
  text-decoration-color: color-mix(in srgb, var(--azul-inst) 35%, transparent);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--petalo-azul-soft); color: #14213A; }


/* ==========================================================================
   03. UTILIDADES DE LAYOUT
   ========================================================================== */

.dd-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.dd-container--narrow { max-width: var(--container-narrow); }

.dd-section { padding-block: var(--section-y); position: relative; }
.dd-section--mist { background: var(--mist); }
.dd-section--surface { background: var(--surface); }

.dd-head { display: flex; flex-direction: column; gap: 1rem; max-width: 62ch; }
.dd-head--center { margin-inline: auto; text-align: center; align-items: center; }
.dd-head h2 { font-size: var(--fs-h2); }

.dd-lead { font-size: var(--fs-lead); color: var(--muted); line-height: 1.65; }

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


/* ==========================================================================
   04. COMPONENTES BASE
   ========================================================================== */

/* --- Etiqueta / eyebrow --- */
/* La etiqueta de sección se leía demasiado pequeña frente a su titular:
   sube de 13 px a un rango de 14,4–16,8 px y gana peso. */
.dd-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body);
  font-size: clamp(.9rem, .84rem + .28vw, 1.05rem); font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--azul-inst);
}
.dd-eyebrow::before {
  content: ""; width: 32px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .55;
}
.dd-head--center .dd-eyebrow::before { display: none; }

/* --- Pétalo (glifo tomado del logo) ---
   El trazado se clona dentro de un shadow tree vía <use>, donde no llegan los
   selectores CSS. Como `fill` es heredable, se declara en el <svg> contenedor. */
.dd-petalo { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* --- Botones --- */
.dd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.25;
  padding: .95rem 1.5rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease);
}
.dd-btn:hover { transform: translateY(-2px); }
.dd-btn:active { transform: translateY(0); }

.dd-btn--primary {
  background: var(--azul-inst); color: #FFFFFF;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--azul-inst) 28%, transparent);
}
.dd-btn--primary:hover { background: var(--azul-inst-alt); color: #FFFFFF; }

.dd-btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.dd-btn--ghost:hover { border-color: var(--azul-inst); color: var(--azul-inst); }

.dd-btn--wsp { background: #1FA855; color: #FFFFFF; box-shadow: 0 6px 16px rgba(31, 168, 85, .26); }
.dd-btn--wsp:hover { background: #17924A; color: #FFFFFF; }

.dd-btn--sm { padding: .7rem 1.1rem; font-size: var(--fs-xs); }

/* Flecha que se desplaza en hover */
.dd-btn .dd-arrow { transition: transform .18s var(--ease); flex: none; }
.dd-btn:hover .dd-arrow { transform: translateX(3px); }

/* --- Marco de fotografía -------------------------------------------------
   Mientras no haya material definitivo el marco muestra el encargo del
   encuadre. Para colocar la foto real basta con descomentar el <img> del
   HTML: se sitúa encima con object-fit y tapa el marco por completo.
   ------------------------------------------------------------------------ */
.dd-foto { margin: 0; display: flex; flex-direction: column; gap: .55rem; min-width: 0; }

.dd-foto__marco {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--t-wash), color-mix(in srgb, var(--t-soft) 32%, var(--surface)));
  border: 1px dashed color-mix(in srgb, var(--t-deep) 32%, transparent);
  color: var(--t-deep);
  display: grid; place-items: center;
}
.dd-foto__marco img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.dd-foto__bloom {
  position: absolute;
  right: -10%; bottom: -14%;
  width: 52%; height: auto; aspect-ratio: 1 / 1;
  fill: currentColor;
  opacity: .14;
  transform: rotate(26deg);
  pointer-events: none;
}

.dd-foto__centro {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  text-align: center;
  padding: 1.25rem;
  max-width: 34ch;
}
.dd-foto__centro > svg { width: 26px; height: 26px; opacity: .8; }
.dd-foto__centro strong {
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.dd-foto__centro small {
  font-size: var(--fs-xs); line-height: 1.5;
  color: var(--muted);
}

.dd-foto figcaption { font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }
.dd-foto figcaption b { color: var(--t-deep); font-weight: 700; }


/* ==========================================================================
   05. TOPBAR + HEADER / NAV
   ========================================================================== */

.dd-topbar {
  background: #14213A;
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-xs);
}
.dd-topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1.5rem; padding-block: .6rem;
}
.dd-topbar__list { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.dd-topbar__item { display: inline-flex; align-items: center; gap: .45rem; }
.dd-topbar a { color: inherit; text-decoration: none; }
.dd-topbar a:hover { color: #FFFFFF; text-decoration: underline; }
.dd-topbar svg { width: 14px; height: 14px; opacity: .7; flex: none; }

.dd-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .2s var(--ease);
}
.dd-header.is-stuck { box-shadow: var(--shadow-sm); }

.dd-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .7rem;
  position: relative;
}

.dd-brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.dd-brand__mark {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 6px 12px;
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
}
.dd-brand__mark img { width: 150px; }

.dd-nav { display: flex; align-items: center; gap: .25rem; }
/* `display:flex` gana al atributo hidden: hay que anularlo explícitamente */
.dd-nav[hidden] { display: none; }
.dd-nav__link {
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  text-decoration: none; padding: .55rem .8rem; border-radius: var(--r-sm);
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.dd-nav__link:hover { color: var(--azul-inst); background: var(--mist); }

.dd-header__cta { display: flex; align-items: center; gap: .5rem; }

.dd-burger {
  display: none;
  width: 44px; height: 44px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; padding: 0; place-items: center;
}
.dd-burger span {
  display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.dd-burger span + span { margin-top: 4px; }
.dd-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.dd-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dd-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* ==========================================================================
   06. HERO
   ========================================================================== */

.dd-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(52rem 34rem at 12% -12%, var(--petalo-azul-wash), transparent 62%),
    radial-gradient(44rem 30rem at 92% 6%,  var(--petalo-rosa-wash), transparent 60%),
    radial-gradient(40rem 30rem at 68% 96%, var(--petalo-verde-wash), transparent 60%),
    var(--paper);
  padding-block: clamp(3rem, 1.5rem + 5vw, 5.5rem) clamp(3.5rem, 2rem + 5vw, 6rem);
}

.dd-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
  gap: clamp(2.5rem, 1rem + 4vw, 4rem);
  align-items: center;
}

.dd-hero__title { font-size: var(--fs-display); margin-block: 1.1rem .1rem; }
/* Sin cursiva: el color basta para destacar la frase */
.dd-hero__title em { font-style: normal; color: var(--azul-inst); }
.dd-hero__copy { margin-top: 1.25rem; max-width: 56ch; }

/* --- Accesos rápidos: un pétalo por línea de acción --- */
.dd-acceso {
  margin-top: 2.25rem;
  display: grid; gap: .7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dd-acceso__titulo {
  grid-column: 1 / -1;
  font-family: var(--font-body);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .1rem;
}
/* Cada caja lleva el color de su linea de accion: son las mismas que antes
   se repetian mas abajo, ahora fundidas en el acceso del hero. */
.dd-acceso__item {
  display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1.05rem;
  background: var(--t-wash);
  border: 1px solid color-mix(in srgb, var(--t-soft) 55%, transparent);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.dd-acceso__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--t-soft);
}
.dd-acceso__texto { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.dd-acceso__nombre { font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; }
.dd-acceso__nota { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.dd-acceso__icono {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  font-size: 19px;
  background: var(--t-wash); color: var(--t-deep);
}
.dd-acceso__flecha {
  margin-left: auto; opacity: .35; flex: none; width: 18px; height: 18px;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.dd-acceso__item:hover .dd-acceso__flecha { opacity: .9; transform: translateX(3px); }

/* Mapeo pétalo ↔ línea de acción (reutilizado en todo el sitio) */
.t-clinica   { --t-soft: var(--petalo-verde-soft);    --t-wash: var(--petalo-verde-wash);    --t-deep: var(--petalo-verde-deep); }
.t-juridica  { --t-soft: var(--petalo-azul-soft);     --t-wash: var(--petalo-azul-wash);     --t-deep: var(--petalo-azul-deep); }
.t-talleres  { --t-soft: var(--petalo-amarillo-soft); --t-wash: var(--petalo-amarillo-wash); --t-deep: var(--petalo-amarillo-deep); }
.t-formacion { --t-soft: var(--petalo-rosa-soft);     --t-wash: var(--petalo-rosa-wash);     --t-deep: var(--petalo-rosa-deep); }

/* --- Panel visual del hero: logo + flor de pétalos --- */
.dd-hero__panel { position: relative; }

/* La flor brota hacia arriba y la fotografía se apoya en su base */
.dd-flor {
  position: relative;
  aspect-ratio: 1 / 1.42;
  max-width: 460px;
  width: 100%;
  margin-inline: auto;
  display: grid;
  place-items: end center;
  padding-bottom: 8%;
}
/* Anclada arriba: con la foto en vertical, centrarla la dejaba oculta */
.dd-flor__svg {
  position: absolute; top: 0; left: 0;
  width: 100%; height: auto; aspect-ratio: 1 / 1;
}
.dd-flor__petalo > path { transform-box: fill-box; transform-origin: 50% 96%; }

@media (prefers-reduced-motion: no-preference) {
  .dd-flor__petalo > path { animation: dd-brote .9s var(--ease) both; }
  .dd-flor__petalo:nth-of-type(1) > path { animation-delay: .00s; }
  .dd-flor__petalo:nth-of-type(2) > path { animation-delay: .09s; }
  .dd-flor__petalo:nth-of-type(3) > path { animation-delay: .18s; }
  .dd-flor__petalo:nth-of-type(4) > path { animation-delay: .27s; }
}
@keyframes dd-brote {
  from { transform: scale(.92); opacity: .65; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Fotografía principal, apoyada sobre la base de la flor */
.dd-hero__foto {
  position: relative;
  width: min(68%, 300px);
  gap: .6rem;
}
.dd-hero__foto .dd-foto__marco {
  aspect-ratio: 3 / 4;
  min-height: 0;
  border-style: solid;
  border-color: var(--surface);
  border-width: 8px;
  box-shadow: var(--shadow-lg);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--petalo-azul-wash), color-mix(in srgb, var(--petalo-verde-soft) 30%, var(--surface)));
  color: var(--azul-inst);
}
.dd-hero__foto figcaption { text-align: center; }

/* Chips flotantes sobre el panel */
.dd-chip {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  padding: .55rem .95rem;
  font-size: var(--fs-xs); font-weight: 700;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}
.dd-chip svg { width: 15px; height: 15px; flex: none; }
.dd-chip--presencial { top: 1%; right: 0; color: var(--petalo-azul-deep); }
.dd-chip--online     { bottom: 6%; left: -2%; color: var(--petalo-verde-deep); }


/* ==========================================================================
   07. FRANJA LEMA (tomada del logo)
   ========================================================================== */

/* Un solo azul para todas las franjas, incluida la primera.
   .dd-lema--claro se mantiene en el HTML como marca semántica, pero ya no
   cambia el fondo: las cuatro comparten el mismo tono. */
.dd-lema { background: #1D4E8F; padding-block: .8rem; }
.dd-lema__list {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .6rem clamp(1.25rem, .5rem + 2vw, 3rem);
}
.dd-lema__item {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body);
  font-size: clamp(.78rem, .7rem + .35vw, 1rem);
  font-weight: 800; letter-spacing: .17em; text-transform: uppercase;
  /* Sobre el azul, los pastel del logo piden una pizca de blanco para
     sostener el contraste AA: el rosa se quedaba en 3.9:1. */
  color: color-mix(in srgb, var(--t-soft) 80%, #FFFFFF);
}
.dd-lema__item .dd-petalo { font-size: 1.05em; }


/* ==========================================================================
   08. QUIÉNES SOMOS
   ========================================================================== */

/* Al quitarse las cajas de color de esta seccion, vision y mision se
   ensanchan ocupando un contenedor mayor que el resto de la pagina. */
#quienes-somos > .dd-container { max-width: 1320px; }

.dd-vm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, .6rem + 1.4vw, 1.75rem);
  margin-top: 3rem;
}
.dd-vm__card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 1rem + 1.6vw, 2.5rem);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dd-vm__card::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--t-soft);
}
.dd-vm__icono {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 14px; background: var(--t-wash); color: var(--t-deep);
  font-size: 22px; margin-bottom: 1.1rem;
}
.dd-vm__card h3 { font-size: var(--fs-h3); margin-bottom: .8rem; }
.dd-vm__card p { color: var(--muted); }
.dd-vm__card p + p { margin-top: .85rem; }

/* ==========================================================================
   09. SERVICIOS — ficha con fotografía a sangre
   --------------------------------------------------------------------------
   Una sola columna de lectura y una sola columna de imagen. La imagen va de
   borde a borde de la tarjeta, así llena cualquier altura sin dejar aire y
   sin necesitar caja propia. Dentro del texto sólo hay un recurso de caja
   (el compromiso institucional); el resto se separa con filetes de color.
   ========================================================================== */

.dd-servicios__lista {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  display: grid; gap: clamp(1.5rem, .8rem + 2.5vw, 2.5rem);
}

.dd-servicio {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(1.5rem, .8rem + 2.5vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .25s var(--ease);
}
.dd-servicio:hover { box-shadow: var(--shadow-md); }

/* Filete de color del servicio sobre el borde superior */
.dd-servicio::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--t-soft), color-mix(in srgb, var(--t-soft) 20%, transparent));
}

/* --- Columna de la fotografía ------------------------------------------
   Sin alternancia y con proporción fija: la foto ocupa el mismo lugar y la
   misma forma en las cuatro fichas. El sobrante de altura cae al final de
   esta columna, dentro del acolchado de la tarjeta, donde no se lee como
   un hueco sino como margen.
   ---------------------------------------------------------------------- */
.dd-servicio__aside {
  display: flex; flex-direction: column; gap: 1.25rem;
  align-self: start;
  min-width: 0;
}
.dd-servicio__foto .dd-foto__marco {
  aspect-ratio: 3 / 4;
  flex: none;
}

/* --- Columna de texto: un único recorrido de lectura ------------------- */
.dd-servicio__body {
  display: flex; flex-direction: column;
  gap: 1.4rem;
  min-width: 0;
}

.dd-servicio__head { display: flex; flex-direction: column; gap: .7rem; }
.dd-servicio__petalo {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 16px; background: var(--t-wash); color: var(--t-deep);
  font-size: 26px;
}
.dd-servicio__nombre {
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.15rem);
  line-height: 1.12;
}
.dd-servicio__bajada {
  font-family: var(--font-display);
  font-size: var(--fs-lead); font-style: italic;
  color: var(--t-deep); line-height: 1.45;
}

/* Para quién es: filete, no caja */
.dd-publico {
  border-left: 3px solid var(--t-soft);
  padding-left: 1.05rem;
  font-size: var(--fs-sm); line-height: 1.55;
}
.dd-publico dt {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--t-deep); margin-bottom: .25rem;
}
.dd-publico dd { margin: 0; color: var(--text); }

.dd-servicio__desc { color: var(--muted); }

.dd-bloque__titulo {
  font-family: var(--font-body);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .85rem;
}

/* Lista simple con pétalo */
.dd-items { display: grid; gap: .6rem; }
.dd-items li {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: var(--fs-sm); line-height: 1.55;
}
.dd-items .dd-petalo { font-size: 14px; color: var(--t-deep); margin-top: .3em; }

/* Programas: mismo filete que "para quién es", sin caja propia */
.dd-programas { display: grid; gap: .9rem; }
.dd-programas li {
  padding-left: 1.05rem;
  border-left: 3px solid var(--t-soft);
  font-size: var(--fs-sm); line-height: 1.55; color: var(--muted);
}
.dd-programas b { color: var(--ink); font-weight: 700; }

/* El único bloque con fondo propio de la ficha */
.dd-compromiso {
  border-radius: var(--r-md);
  background: var(--t-wash);
  padding: 1.15rem 1.25rem;
}
.dd-compromiso .dd-bloque__titulo { color: var(--t-deep); }
.dd-compromiso ul { display: grid; gap: .5rem; }
.dd-compromiso li {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: var(--fs-sm); line-height: 1.5;
}
.dd-compromiso svg { width: 17px; height: 17px; flex: none; margin-top: .22em; color: var(--t-deep); }

.dd-servicio__cta { margin-top: auto; padding-top: .25rem; }
.dd-servicio__cta--doble { display: flex; flex-wrap: wrap; gap: .6rem; }
/* El boton de WhatsApp conserva su verde propio; el de agenda toma el
   color del servicio en version clara. */
.dd-servicio__cta--doble .dd-btn--wsp,
.dd-servicio__cta--doble .dd-btn--wsp:hover { background: #1FA855; color: #FFFFFF; }
.dd-servicio__cta--doble .dd-btn--agenda,
.dd-servicio__cta--doble .dd-btn--agenda:hover {
  background: var(--t-wash);
  color: var(--t-deep);
  border-color: color-mix(in srgb, var(--t-deep) 35%, transparent);
  box-shadow: none;
}
.dd-servicio__cta .dd-btn {
  background: var(--t-deep);
  color: #FFFFFF;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--t-deep) 26%, transparent);
}
.dd-servicio__cta .dd-btn:hover {
  background: color-mix(in srgb, var(--t-deep) 86%, #000000);
  color: #FFFFFF;
}
/* En oscuro los "deep" son claros: el texto del botón se invierte */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dd-servicio__cta .dd-btn,
  :root:not([data-theme="light"]) .dd-servicio__cta .dd-btn:hover { color: #0E1522; }
}
:root[data-theme="dark"] .dd-servicio__cta .dd-btn,
:root[data-theme="dark"] .dd-servicio__cta .dd-btn:hover { color: #0E1522; }


/* ==========================================================================
   NOVEDADES — galería de actividades
   En WordPress este bloque se reemplaza por el widget Galería de Elementor,
   para que la corporación suba y reordene sus fotos sin tocar el diseño.
   ========================================================================== */

.dd-galeria {
  margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, .6rem + 1.2vw, 1.5rem);
}

/* Cada pieza hereda un pétalo distinto, rotando los cuatro colores */
.dd-galeria__item:nth-child(4n+1) { --t-soft: var(--petalo-verde-soft);    --t-wash: var(--petalo-verde-wash);    --t-deep: var(--petalo-verde-deep); }
.dd-galeria__item:nth-child(4n+2) { --t-soft: var(--petalo-azul-soft);     --t-wash: var(--petalo-azul-wash);     --t-deep: var(--petalo-azul-deep); }
.dd-galeria__item:nth-child(4n+3) { --t-soft: var(--petalo-amarillo-soft); --t-wash: var(--petalo-amarillo-wash); --t-deep: var(--petalo-amarillo-deep); }
.dd-galeria__item:nth-child(4n+4) { --t-soft: var(--petalo-rosa-soft);     --t-wash: var(--petalo-rosa-wash);     --t-deep: var(--petalo-rosa-deep); }

.dd-galeria__item { gap: .9rem; }
.dd-galeria__item .dd-foto__marco { aspect-ratio: 3 / 4; flex: none; }

/* Texto de cada actividad, bajo su fotografía */
.dd-galeria__pie { display: flex; flex-direction: column; gap: .3rem; }
.dd-galeria__titulo {
  font-size: 1.0625rem; font-weight: 600; line-height: 1.25;
  color: var(--ink);
}
.dd-galeria__texto {
  font-size: var(--fs-sm); line-height: 1.55; color: var(--muted);
}

.dd-galeria__nota {
  margin-top: 1.75rem;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--muted);
}

@media (max-width: 960px) {
  .dd-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .dd-galeria { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   10. CONTACTO
   ========================================================================== */

.dd-contacto__grid {
  margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, .8rem + 2.5vw, 2.5rem);
  align-items: start;
}

/* --- Formulario --- */
.dd-form {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  box-shadow: var(--shadow-md);
}
.dd-form__paso { display: grid; gap: 1rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.dd-form__paso + .dd-form__paso {
  margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line-soft);
}
.dd-form__legend {
  font-family: var(--font-display);
  font-size: var(--fs-h3); color: var(--ink); padding: 0; margin-bottom: .35rem;
  line-height: 1.2;
}
.dd-form__nota { font-size: var(--fs-xs); color: var(--muted); margin-top: -.5rem; }

.dd-campos { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dd-campo { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.dd-campo--full { grid-column: 1 / -1; }

.dd-campo label { font-size: var(--fs-xs); font-weight: 700; color: var(--ink); }
.dd-campo label .req { color: var(--petalo-rosa-deep); }

.dd-campo input,
.dd-campo select,
.dd-campo textarea {
  font-family: inherit; font-size: var(--fs-sm); color: var(--text);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: .8rem .95rem;
  width: 100%;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.dd-campo textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.dd-campo select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A678A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 17px;
  padding-right: 2.6rem;
}
.dd-campo input::placeholder,
.dd-campo textarea::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); }
.dd-campo input:focus,
.dd-campo select:focus,
.dd-campo textarea:focus {
  outline: none;
  border-color: var(--azul-inst);
  background: var(--surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--azul-inst) 16%, transparent);
}

/* Bloque condicional institucional */
.dd-institucional {
  grid-column: 1 / -1;
  display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 1.15rem;
  border-radius: var(--r-md);
  background: var(--petalo-azul-wash);
  border: 1px solid color-mix(in srgb, var(--petalo-azul-soft) 55%, transparent);
}
.dd-institucional__titulo {
  grid-column: 1 / -1;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--petalo-azul-deep);
}

/* Cláusula de confidencialidad */
.dd-confid {
  display: flex; gap: .85rem; align-items: flex-start;
  margin-top: 1.5rem; padding: 1.1rem 1.25rem;
  background: var(--petalo-verde-wash);
  border-radius: var(--r-md);
  font-size: var(--fs-xs); line-height: 1.6; color: var(--text);
}
.dd-confid svg { width: 22px; height: 22px; flex: none; color: var(--petalo-verde-deep); }
.dd-confid strong { color: var(--ink); display: block; margin-bottom: .15rem; font-size: var(--fs-sm); }

.dd-form__envio { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.dd-form__aviso {
  margin-top: 1rem; padding: .9rem 1.1rem; border-radius: var(--r-sm);
  background: var(--petalo-verde-wash); color: var(--petalo-verde-deep);
  font-size: var(--fs-sm); font-weight: 600;
}

/* --- Datos directos --- */
.dd-datos { display: grid; gap: 1rem; }

.dd-dato {
  display: flex; gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 1.15rem 1.25rem;
}
.dd-dato__icono {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border-radius: 12px; background: var(--t-wash); color: var(--t-deep);
}
.dd-dato__icono svg { width: 20px; height: 20px; }
.dd-dato__titulo {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .3rem;
}
.dd-dato__valor { font-size: var(--fs-sm); line-height: 1.55; color: var(--text); min-width: 0; }
.dd-dato__valor a { font-weight: 600; overflow-wrap: anywhere; }
.dd-dato__valor span { display: block; color: var(--muted); font-size: var(--fs-xs); }

/* --- Mapa --- */
.dd-mapa {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: linear-gradient(135deg, var(--petalo-azul-wash), var(--mist));
  min-height: 210px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.dd-mapa__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--azul-inst) 11%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--azul-inst) 11%, transparent) 1px, transparent 1px);
  background-size: 38px 38px;
}
.dd-mapa__pin {
  position: absolute; top: 36%; left: 50%; transform: translate(-50%, -50%);
  color: var(--petalo-rosa-deep);
}
.dd-mapa__pin svg { width: 34px; height: 34px; filter: drop-shadow(0 4px 8px rgba(20, 33, 58, .22)); }
.dd-mapa__pie {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .9rem 1.1rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs);
}
.dd-mapa__pie strong { color: var(--ink); display: block; font-size: var(--fs-sm); }
.dd-mapa__pie span { color: var(--muted); }


/* ==========================================================================
   11. FOOTER + WHATSAPP FLOTANTE
   ========================================================================== */

.dd-footer { background: #14213A; color: rgba(255, 255, 255, .76); }
.dd-footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  padding-block: clamp(3rem, 2rem + 2.5vw, 4.5rem) 2rem;
}
.dd-footer__mark { background: #FFFFFF; border-radius: var(--r-md); padding: .85rem 1rem; width: max-content; max-width: 100%; }
.dd-footer__mark img { width: 200px; }
.dd-footer__desc { margin-top: 1.1rem; font-size: var(--fs-sm); line-height: 1.65; max-width: 38ch; }
.dd-footer h4 {
  font-family: var(--font-body); color: #FFFFFF;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.dd-footer ul { display: grid; gap: .6rem; font-size: var(--fs-sm); }
.dd-footer a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.dd-footer a:hover { color: #FFFFFF; text-decoration: underline; }
.dd-footer__bottom {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  padding-block: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--fs-xs);
}
.dd-redes { display: flex; gap: .5rem; margin-top: 1.25rem; }
.dd-redes a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .10);
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.dd-redes a:hover { background: rgba(255, 255, 255, .22); transform: translateY(-2px); }
.dd-redes svg { width: 18px; height: 18px; }

.dd-wsp-float {
  position: fixed;
  right: clamp(1rem, .5rem + 1vw, 1.75rem);
  bottom: calc(clamp(1rem, .5rem + 1vw, 1.75rem) + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: inline-flex; align-items: center; gap: .6rem;
  background: #1FA855; color: #FFFFFF;
  border-radius: var(--r-pill);
  padding: .85rem 1.25rem;
  font-size: var(--fs-sm); font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 24px rgba(31, 168, 85, .35);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.dd-wsp-float:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(31, 168, 85, .45); color: #FFFFFF; }
.dd-wsp-float svg { width: 21px; height: 21px; flex: none; }


/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
}

@media (max-width: 960px) {
  .dd-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: .15rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: .75rem var(--gutter) 1.25rem;
    margin-inline: calc(var(--gutter) * -1);
  }
  .dd-nav__link { padding: .85rem .6rem; }
  .dd-burger { display: grid; }
  .dd-header__cta .dd-btn { display: none; }

  .dd-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .dd-hero__panel { order: -1; }
  .dd-flor { max-width: 330px; }

  .dd-vm { grid-template-columns: minmax(0, 1fr); }

  /* Apilada: la foto siempre arriba, con proporción fija en las cuatro */
  .dd-servicio { grid-template-columns: minmax(0, 1fr); }
  .dd-servicio__foto .dd-foto__marco { aspect-ratio: 3 / 4; }

  .dd-contacto__grid { grid-template-columns: minmax(0, 1fr); }

  .dd-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dd-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .dd-topbar__inner { justify-content: center; text-align: center; }
  .dd-acceso { grid-template-columns: minmax(0, 1fr); }
  .dd-campos { grid-template-columns: minmax(0, 1fr); }
  .dd-institucional { grid-template-columns: minmax(0, 1fr); }
  .dd-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .dd-wsp-float span { display: none; }
  .dd-wsp-float { padding: .95rem; }
  .dd-lema__item { font-size: .72rem; letter-spacing: .12em; }
  .dd-chip { padding: .45rem .7rem; font-size: .7rem; }
  .dd-chip--presencial { top: 0; }
  .dd-chip--online { bottom: 2%; }
}

@media print {
  .dd-header, .dd-wsp-float, .dd-topbar { display: none; }
}


/* ==========================================================================
   13. AJUSTES PARA WORDPRESS Y ELEMENTOR
   Todo lo anterior es el sistema de diseño tal cual se aprobó. Debajo van
   solo las piezas que aparecen al montar el diseño sobre WordPress: el
   marcado que genera wp_nav_menu(), los estados del formulario y las
   salvaguardas de responsividad que exige el editor.
   ========================================================================== */

/* --- Menús nativos -------------------------------------------------------
   wp_nav_menu() envuelve los enlaces en <ul><li>, así que la fila flexible
   pasa del <nav> a la lista. */
.dd-nav { display: block; }

.dd-nav__lista {
  display: flex; align-items: center; gap: .25rem;
  list-style: none; margin: 0; padding: 0;
}
.dd-nav__lista li { margin: 0; position: relative; }
.dd-nav__lista a {
  display: block;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  text-decoration: none; padding: .55rem .8rem; border-radius: var(--r-sm);
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.dd-nav__lista a:hover { color: var(--azul-inst); background: var(--mist); }
.dd-nav__lista .current-menu-item > a,
.dd-nav__lista .current_page_item > a { color: var(--azul-inst); }

/* Submenús: se despliegan al pasar el cursor y también con el foco del
   teclado, para que se puedan recorrer sin ratón. */
.dd-nav__lista .sub-menu {
  position: absolute; z-index: 5;
  list-style: none; margin: .25rem 0 0; padding: .4rem;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden;
  transition: opacity .15s var(--ease);
}
.dd-nav__lista li:hover > .sub-menu,
.dd-nav__lista li:focus-within > .sub-menu { opacity: 1; visibility: visible; }

/* --- Cabecera: queda fija solo si el widget lo pide ---------------------- */
.dd-header { position: static; }
.dd-header--fija {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 60;
}

/* --- Pie de página con menús nativos y texto libre ---------------------- */
.dd-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: var(--fs-sm); }
.dd-footer__menu a { color: inherit; text-decoration: none; }
.dd-footer__menu a:hover { color: #FFFFFF; text-decoration: underline; }
.dd-footer__texto { font-size: var(--fs-sm); line-height: 1.65; }
.dd-footer__texto p { margin: 0 0 .9rem; }
.dd-footer__texto p:last-child { margin-bottom: 0; }
.dd-footer__texto a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.dd-footer__texto a:hover { color: #FFFFFF; text-decoration: underline; }

/* --- Visión y misión: el texto llega desde un editor enriquecido -------- */
.dd-vm__texto { color: var(--muted); }
.dd-vm__texto p { margin: 0 0 .85rem; }
.dd-vm__texto p:last-child { margin-bottom: 0; }

/* --- Galería enlazable --------------------------------------------------- */
.dd-galeria__enlace { display: flex; flex-direction: column; gap: .9rem; text-decoration: none; color: inherit; }
.dd-galeria__enlace:hover .dd-galeria__titulo { color: var(--azul-inst); }

/* --- Formulario ---------------------------------------------------------- */

/* Campo trampa: fuera de la vista y del recorrido de tabulación, pero
   presente en el DOM para que los robots lo rellenen. No se usa display:none
   porque muchos robots detectan justamente eso. */
.dd-trampa {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.dd-form__aviso--error {
  background: var(--petalo-rosa-wash);
  color: var(--petalo-rosa-deep);
}

.dd-form button[disabled] { opacity: .65; cursor: progress; }

/* --- Mapa incrustado ----------------------------------------------------- */
.dd-mapa--incrustado {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 0;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.dd-mapa--incrustado iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}

/* --- Iconos elegidos desde Elementor -------------------------------------
   Icons_Manager imprime <i> para fuentes de iconos y <svg> para SVG subidos;
   ambos casos necesitan el mismo tamaño en cada contexto. */
.dd-topbar__item i, .dd-topbar__item svg { width: 14px; height: 14px; font-size: 14px; flex: none; opacity: .75; }
.dd-chip i, .dd-chip svg { width: 15px; height: 15px; font-size: 15px; flex: none; }
.dd-dato__icono i, .dd-dato__icono svg { width: 20px; height: 20px; font-size: 19px; }
.dd-redes i, .dd-redes svg { width: 18px; height: 18px; font-size: 17px; }
.dd-btn i, .dd-btn svg { flex: none; }

/* --- Elementor: los widgets ocupan el ancho de su contenedor ------------- */
.elementor-widget-dd_topbar .elementor-widget-container,
.elementor-widget-dd_header .elementor-widget-container,
.elementor-widget-dd_hero .elementor-widget-container,
.elementor-widget-dd_lema .elementor-widget-container,
.elementor-widget-dd_footer .elementor-widget-container { width: 100%; }


/* ==========================================================================
   14. SALVAGUARDAS DE RESPONSIVIDAD
   El punto de corte de móvil de Elementor es 767 px. Estas reglas son la red
   de seguridad: garantizan que nada desborde la pantalla aunque el cliente
   escriba textos muy largos o suba imágenes enormes desde el panel.
   ========================================================================== */

@media (max-width: 767px) {

  /* Nada puede ser más ancho que la pantalla, y el relleno cuenta dentro
     del ancho declarado. */
  .dd-topbar, .dd-header, .dd-hero, .dd-lema, .dd-section,
  .dd-footer, .dd-servicio, .dd-galeria, .dd-form, .dd-vm__card,
  .dd-dato, .dd-mapa, .dd-acceso__item, .dd-btn {
    box-sizing: border-box;
    max-width: 100%;
  }

  .dd-container { width: 100%; max-width: 100%; }

  /* Los botones dejan de competir por el ancho y se apilan a pantalla
     completa: es el desborde más típico al pasar un diseño a Elementor. */
  .dd-servicio__cta--doble { flex-direction: column; align-items: stretch; }
  .dd-servicio__cta--doble .dd-btn { width: 100%; }
  .dd-form__envio { flex-direction: column; align-items: stretch; }
  .dd-form__envio .dd-btn { width: 100%; }

  /* La cabecera no se rompe: el logotipo cede ancho antes que el menú. */
  .dd-header__inner { flex-wrap: nowrap; gap: .5rem; }
  .dd-brand { min-width: 0; flex: 0 1 auto; }
  .dd-brand__mark { max-width: 100%; }
  .dd-brand__mark img { max-width: 100%; height: auto; }
  .dd-header__cta { flex: none; }

  /* El botón de cabecera solo aparece en móvil si el widget lo permite. */
  .dd-header:not(.dd-header--cta-solo-escritorio) .dd-header__cta .dd-btn {
    display: inline-flex;
    padding: .6rem .85rem;
    font-size: .75rem;
  }

  /* Palabras largas (correos, direcciones web) parten de línea en vez de
     desbordar el contenedor. */
  .dd-dato__valor, .dd-footer__texto, .dd-galeria__texto,
  .dd-servicio__desc, .dd-lead { overflow-wrap: anywhere; }

  /* Todas las rejillas a una sola columna. */
  .dd-hero__grid, .dd-vm, .dd-galeria, .dd-contacto__grid,
  .dd-servicio, .dd-acceso, .dd-campos, .dd-institucional,
  .dd-footer__grid { grid-template-columns: minmax(0, 1fr); }

  /* Ninguna imagen ni caja con proporción puede empujar la página. */
  .dd-foto__marco, .dd-foto__marco img { max-width: 100%; }
  .dd-flor { max-width: 100%; }

  /* El menú desplegable no se sale del contenedor. */
  .dd-nav { margin-inline: calc(var(--gutter) * -1); }
  .dd-nav__lista { flex-direction: column; align-items: stretch; }
  .dd-nav__lista .sub-menu {
    position: static; opacity: 1; visibility: visible;
    box-shadow: none; border: 0; background: transparent;
    padding-left: 1rem;
  }
}

/* Pantallas muy angostas: la franja y los distintivos ceden tamaño. */
@media (max-width: 400px) {
  .dd-lema__item { font-size: .68rem; letter-spacing: .1em; }
  .dd-chip { font-size: .68rem; padding: .4rem .65rem; }
}