@charset "UTF-8";
/* ==========================================================================
   PLAZA DIGITAL — hoja de estilos única.

   Escrita a mano. **No hay compilación, no hay Tailwind, no hay build.**
   Este archivo es exactamente lo que descarga el navegador: si lo editas y
   guardas, el cambio ya está en la web.

   Es lo que hace posible el flujo de trabajo de este tema: el HTML de las
   páginas vive en el editor de WordPress, y como aquí no hay ningún proceso
   que «escanee» el marcado, da igual que una clase esté en la base de datos.
   Si usas una clase que no existe todavía, se añade aquí abajo y funciona.

   ÍNDICE
     1. Tokens de marca
     2. Tipografía autoalojada
     3. Reinicio y base
     4. Disposición: secciones, contenedores, rejillas
     5. Piezas de marca: arco, sonrisa, degradado
     6. Componentes: titulares, botones, enlaces, tarjetas, listas
     7. Hero
     8. Cabecera y menú móvil
     9. Acordeón
    10. Formulario (Contact Form 7)
    11. Pie
    12. Prosa (páginas legales)
    13. Entradas al scroll
    14. Utilidades mínimas
    15. Pop-up de espacios
   ========================================================================== */


/* ==========================================================================
   1. TOKENS DE MARCA — valores exactos del manual de identidad.
      No los cambies sin actualizar AGENTS.md.
   ========================================================================== */

:root {
  /* Degradado de marca: #B116BC → #DE0066 → #F78245.
     Siempre izquierda→derecha o arriba→abajo. Nunca en diagonal, nunca
     invertido. */
  --pd-marca-1: #b116bc;
  --pd-marca-2: #de0066;
  --pd-marca-3: #f78245;

  --pd-degradado: linear-gradient(90deg, var(--pd-marca-1) 0%, var(--pd-marca-2) 50%, var(--pd-marca-3) 100%);

  /* Tramo legible del degradado.
     El naranja #F78245 da 2,55:1 contra blanco: no llega ni al 3:1 del texto
     grande. Por eso el degradado completo se reserva para elementos gráficos
     —arco, sonrisa, isotipo— y todo lo que lleve o soporte texto usa este
     tramo morado→magenta, cuyo peor caso es 4,89:1. Misma dirección. */
  --pd-degradado-texto: linear-gradient(90deg, var(--pd-marca-1) 0%, var(--pd-marca-2) 100%);

  /* Colores de sector. Van en filo e icono; NUNCA como fondo de tarjeta ni
     como texto: los tres suspenden AA sobre papel. */
  --pd-espacios: #d900ca;
  --pd-comercios: #f96401;
  --pd-formacion: #00bff2;

  /* Neutros */
  --pd-tinta: #1a1a1a;
  --pd-tinta-suave: #4a4a4a;
  --pd-papel: #ffffff;
  --pd-papel-2: #f7f5f3;
  --pd-linea: rgba(26, 26, 26, 0.1);
  /* El token `línea` del manual da 1,23:1 contra papel. Vale de separador
     decorativo, pero un campo de formulario es un componente de interfaz y
     WCAG 1.4.11 le exige 3:1. Este gris es el mismo tinta al 46%: 3,45:1. */
  --pd-linea-campo: #8a8a8a;
  --pd-linea-inversa: rgba(255, 255, 255, 0.16);

  /* Escala tipográfica fluida. Base 18px móvil → 19px escritorio.
     ⚠️ Ningún paso baja de 16px. Es la regla que sostiene el proyecto: el
     público principal son personas mayores de 60 años. */
  --pd-txt-xs: clamp(0.94rem, 0.92rem + 0.1vw, 1rem);        /* 15→16 */
  --pd-txt-sm: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);     /* 16→17 */
  --pd-txt-base: clamp(1.125rem, 1.1rem + 0.13vw, 1.1875rem);/* 18→19 */
  --pd-txt-lg: clamp(1.25rem, 1.19rem + 0.3vw, 1.375rem);    /* 20→22 */
  --pd-txt-xl: clamp(1.375rem, 1.28rem + 0.48vw, 1.625rem);  /* 22→26 */
  --pd-txt-2xl: clamp(1.625rem, 1.44rem + 0.92vw, 2.125rem); /* 26→34 */
  --pd-txt-3xl: clamp(1.875rem, 1.55rem + 1.63vw, 2.75rem);  /* 30→44 */
  --pd-txt-4xl: clamp(2.25rem, 1.71rem + 2.68vw, 3.625rem);  /* 36→58 */
  --pd-txt-5xl: clamp(2.5rem, 1.7rem + 4.2vw, 4rem);         /* h1 del hero */

  /* Espaciado */
  --pd-seccion: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  --pd-seccion-corta: clamp(3rem, 2rem + 5vw, 5.5rem);
  --pd-borde: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --pd-tactil: 3rem;   /* 48px — objetivo táctil mínimo */
  --pd-campo: 3.25rem; /* 52px — alto de input */

  /* Radios */
  --pd-radio-sm: 0.5rem;
  --pd-radio-md: 0.75rem;
  --pd-radio-lg: 1rem;
  --pd-radio-xl: 1.5rem;
  --pd-radio-full: 999px;

  /* Sombras. Discretas: la jerarquía la lleva la tipografía. */
  --pd-sombra-baja: 0 1px 2px rgba(26, 26, 26, 0.05), 0 2px 8px rgba(26, 26, 26, 0.04);
  --pd-sombra-media: 0 2px 4px rgba(26, 26, 26, 0.05), 0 8px 24px rgba(26, 26, 26, 0.07);

  /* Anchos */
  --pd-contenido: 72rem;
  --pd-texto: 40rem;
  --pd-medida: 34em; /* ~62 caracteres, ancho de lectura cómodo */

  /* Alto de la barra fija. Lo necesitan el hero y el desplazamiento a anclas. */
  --pd-barra-alto: 111px;
  --pd-barra-alto-min: 103px;
}


/* ==========================================================================
   2. TIPOGRAFÍA — Ubuntu autoalojada.

   Tres pesos y solo el subconjunto latino: 42 kB en total. Las rutas son
   relativas a ESTE archivo, que vive en assets/css/.
   ========================================================================== */

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

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

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


/* ==========================================================================
   3. REINICIO Y BASE

   Reinicio mínimo escrito a mano. Sin Tailwind no hay preflight, así que hay
   que poner lo imprescindible y nada más.
   ========================================================================== */

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

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La barra es fija y mide 111px: los anclajes no deben quedar debajo. */
  scroll-padding-top: 8rem;
}

body {
  min-height: 100vh;
  background-color: var(--pd-papel);
  color: var(--pd-tinta);
  font-family: "Ubuntu", Arial, Helvetica, sans-serif;
  font-size: var(--pd-txt-base);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.022em;
  text-wrap: balance;
  line-height: 1.15;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

/* Foco visible de 3px, el mismo en todo el sitio para que sea predecible. */
:focus-visible {
  outline: 3px solid var(--pd-marca-2);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sobre fondo tinta el magenta pierde contraste: se refuerza con blanco. */
.pd-seccion--tinta :focus-visible,
.pd-pie :focus-visible {
  outline-color: var(--pd-papel);
}

::selection {
  background-color: var(--pd-marca-2);
  color: var(--pd-papel);
}

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

/* Saltar al contenido: invisible hasta que recibe el foco. */
.pd-saltar {
  position: absolute;
  left: -9999px;
  z-index: 200;
}

.pd-saltar:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--pd-tinta);
  color: var(--pd-papel);
  border-radius: var(--pd-radio-md);
}

/* La barra de administración desplaza el documento; la cabecera fija se
   compensa para que el sitio se vea igual con sesión y sin ella. */
body.admin-bar .pd-barra { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .pd-barra { top: 46px; }
}


/* ==========================================================================
   4. DISPOSICIÓN
   ========================================================================== */

.pd-seccion {
  position: relative;
  padding-block: var(--pd-seccion);
  background-color: var(--pd-papel);
  color: var(--pd-tinta);
}

.pd-seccion--papel-2 { background-color: var(--pd-papel-2); }

.pd-seccion--tinta {
  background-color: var(--pd-tinta);
  color: var(--pd-papel);
}

.pd-seccion--corta { padding-block: var(--pd-seccion-corta); }

/* Una sección con sonrisa no lleva relleno abajo, porque la curva ES el borde
   inferior de la sección y tiene que quedar pegada a él. Eso es correcto.
   Lo que no lo era: dar por hecho que «la curva ya cierra» y no dejar nada
   entre el contenido y ella. La curva es una FORMA, no separación. Medido,
   el contenedor tocaba la curva a 0px en todos los anchos; en la sección
   oscura, donde los bloques no llevan relleno propio que disimule, el texto
   se comía la curva. El aire va encima de la curva, no debajo del contenido:
   así la curva sigue pegada al borde y el contenido respira. */
.pd-seccion--con-sonrisa { padding-bottom: 0; }

.pd-seccion--con-sonrisa > .pd-sonrisa { margin-top: var(--pd-seccion-corta); }

[id].pd-seccion { scroll-margin-top: 8rem; }

.pd-contenedor {
  width: 100%;
  max-width: var(--pd-contenido);
  margin-inline: auto;
  padding-inline: var(--pd-borde);
}

.pd-contenedor--texto { max-width: var(--pd-texto); }

/* Rejillas. Una sola columna por defecto y se abren cuando hay sitio. */
.pd-rejilla {
  display: grid;
  gap: 1.5rem;
}

@media (width >= 40rem) {
  .pd-rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width >= 48rem) {
  .pd-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-rejilla--foto { grid-template-columns: 0.8fr 1fr; gap: 2.5rem 4rem; align-items: center; }
}

@media (width >= 64rem) {
  .pd-rejilla--mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 4rem; align-items: stretch; }
  .pd-rejilla--contacto { grid-template-columns: 1.3fr 1fr; gap: 2.5rem 3rem; align-items: start; }
}

.pd-rejilla--ancha { gap: 3rem; }


/* ==========================================================================
   5. PIEZAS DE MARCA
   ========================================================================== */

/* El arco de conexión del logotipo, llevado a subrayado de los titulares.
   Se pinta con el atajo [pd_arco] o con el patrón de titular. */
.pd-arco {
  display: block;
  width: 100%;
  height: 0.7em;
  overflow: visible;
}

/* La curva del isotipo «pd» como canto entre bloques.
   ⚠️ Se rellena con el color de la sección SIGUIENTE, y el -1px de margen
   evita la costura de subpíxel. */
.pd-sonrisa {
  display: block;
  width: 100%;
  height: clamp(1.75rem, 4.5vw, 4.5rem);
  margin-bottom: -1px;
}

.pd-sonrisa--papel { fill: var(--pd-papel); }
.pd-sonrisa--papel-2 { fill: var(--pd-papel-2); }
.pd-sonrisa--tinta { fill: var(--pd-tinta); }

/* Texto con el degradado. El color sólido va primero como respaldo: si
   background-clip no se soporta, el texto sigue siendo legible. */
.pd-degradado-texto {
  color: var(--pd-marca-2);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .pd-degradado-texto {
    background-image: var(--pd-degradado-texto);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-block-end: 0.06em; /* que no se recorte el descendente de la «p» */
  }
}

@media (forced-colors: active) {
  .pd-degradado-texto {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

.pd-filo-degradado {
  height: 6px;
  width: 100%;
  background-image: var(--pd-degradado);
}

/* Marca de dato que el cliente todavía no ha dado. Se ve a propósito: es
   mejor que un hueco silencioso o, peor, un dato inventado. */
.pd-pendiente {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--pd-radio-sm);
  background: var(--pd-papel-2);
  box-shadow: inset 0 0 0 1px var(--pd-linea);
  color: var(--pd-tinta-suave);
  font-size: var(--pd-txt-sm);
  font-weight: 500;
}

.pd-seccion--tinta .pd-pendiente,
.pd-pie .pd-pendiente {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: none;
  color: var(--pd-papel);
}


/* ==========================================================================
   6. COMPONENTES
   ========================================================================== */

/* --- Antetítulo en versalitas ------------------------------------------- */
.pd-kicker {
  font-size: var(--pd-txt-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pd-tinta-suave);
}

.pd-seccion--tinta .pd-kicker { color: rgba(255, 255, 255, 0.65); }

/* --- Titular con arco ----------------------------------------------------
   El arco va en posición absoluta a propósito: con width:100% dentro de un
   inline-block cuyo ancho lo fija el texto, el navegador resuelve el
   porcentaje contra el ancho intrínseco del SVG y el arco sale corto. */
.pd-titular {
  font-size: var(--pd-txt-3xl);
  line-height: 1.18;
  padding-bottom: 0.42em;
}

.pd-titular--grande { font-size: var(--pd-txt-4xl); line-height: 1.1; }

.pd-titular__texto {
  position: relative;
  display: inline-block;
}

.pd-titular__arco {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  margin-top: 0.375rem;
  display: block;
  pointer-events: none;
}

/* --- Titular con arco AUTOMÁTICO -----------------------------------------
   Para los patrones híbridos, donde el titular es un bloque nativo de
   WordPress y por tanto no puede llevar los `<span>` internos que necesita el
   arco normal.

   Aquí el arco es un pseudo-elemento con el SVG de fondo. Dos detalles que lo
   hacen funcionar:

   · `display: inline-block` hace que el h2 mida lo que mide su texto, no la
     columna entera. Sin eso el arco saldría cruzando toda la página.

   · El grosor del trazo NO se deforma aunque el arco se estire. Parece que
     debería, con `background-size: 100% 100%`, pero la altura de la caja es
     fija (0.7em) y el trazo es horizontal: su grosor se mide en vertical, que
     es el eje que no cambia. Solo varía la curvatura, igual que en el arco
     normal con `preserveAspectRatio="none"`.

   El degradado va con los colores literales porque un SVG en `url()` no ve
   las variables CSS del documento. Son los mismos del manual; si cambian ahí,
   hay que cambiarlos aquí. */
.pd-titular--auto {
  position: relative;
  display: inline-block;
  padding-bottom: 0.42em;
}

.pd-titular--auto::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  /* El arco tiene que caer 6px por debajo del texto, exactamente igual que en
     el titular clásico. Sale de despejar:

        fondo del texto + 6px = fondo de la caja − bottom − alto del arco
        fondo de la caja = fondo del texto + 0.42em  (el padding)
        alto del arco    = 0.7em
        ⇒ bottom = −0.28em − 6px

     El tramo en `em` escala con el tamaño de letra y los 6px se quedan fijos,
     que es como se comporta el original (usa rem). Medido: sin esto el arco
     se montaba 12,3px encima del texto. */
  bottom: calc(-0.28em - 6px);
  display: block;
  height: 0.7em;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23b116bc'/%3E%3Cstop offset='.5' stop-color='%23de0066'/%3E%3Cstop offset='1' stop-color='%23f78245'/%3E%3C/linearGradient%3E%3Cpath d='M2 15.2 Q 118 1.6 238 10.4' fill='none' stroke='url(%23a)' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- Entradilla ---------------------------------------------------------- */
.pd-entradilla {
  max-width: var(--pd-medida);
  font-size: var(--pd-txt-lg);
  line-height: 1.6;
  color: var(--pd-tinta-suave);
}

.pd-seccion--tinta .pd-entradilla { color: rgba(255, 255, 255, 0.85); }

.pd-texto { color: var(--pd-tinta-suave); }
.pd-seccion--tinta .pd-texto { color: rgba(255, 255, 255, 0.85); }

/* --- Botones -------------------------------------------------------------
   ⚠️ Alto mínimo 48px en TODAS las variantes: es objetivo táctil, no una
   decisión estética. El tamaño grande (56px) es el de los CTA de sección. */
.pd-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: var(--pd-tactil);
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: var(--pd-radio-full);
  background-image: var(--pd-degradado-texto);
  color: var(--pd-papel);
  font-size: var(--pd-txt-base);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--pd-sombra-baja);
  transition: box-shadow 0.15s ease-out, filter 0.15s ease-out, transform 0.15s ease-out;
}

.pd-boton:hover { box-shadow: var(--pd-sombra-media); filter: brightness(1.1); }
.pd-boton:active { transform: translateY(1px); filter: brightness(0.95); }

/* En forced-colors el degradado desaparece: hay que devolver un borde. */
@media (forced-colors: active) {
  .pd-boton { border: 1px solid ButtonText; }
}

.pd-boton--grande {
  min-height: 3.5rem;
  padding: 0.875rem 2rem;
  font-size: var(--pd-txt-lg);
}

.pd-boton--secundario {
  background-image: none;
  background-color: transparent;
  border: 2px solid var(--pd-tinta);
  color: var(--pd-tinta);
  box-shadow: none;
}

.pd-boton--secundario:hover {
  background-color: var(--pd-tinta);
  color: var(--pd-papel);
  filter: none;
}

/* Velo blanco: solo lo lleva el botón del hero, que es el único que puede
   tener el anillo por debajo. */
.pd-boton--velo { background-color: rgba(255, 255, 255, 0.92); }

.pd-boton--inverso {
  background-image: none;
  background-color: var(--pd-papel);
  border: 2px solid var(--pd-papel);
  color: var(--pd-tinta);
  box-shadow: none;
}

.pd-boton--inverso:hover {
  background-color: transparent;
  color: var(--pd-papel);
  filter: none;
}

.pd-botonera {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

@media (width >= 40rem) {
  .pd-botonera { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
}

/* --- Enlace con flecha, el que cierra cada tarjeta ------------------------
   min-height no es decorativo: un enlace es un objetivo táctil como
   cualquier otro y no puede quedarse en el alto de su línea de texto. */
.pd-enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--pd-tactil);
  color: var(--pd-tinta);
  font-size: var(--pd-txt-base);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--pd-linea);
  text-underline-offset: 6px;
}

.pd-enlace:hover { text-decoration-color: var(--pd-marca-2); }

.pd-enlace svg { transition: transform 0.15s ease-out; }
.pd-enlace:hover svg { transform: translateX(4px); }

.pd-enlace--secundario {
  color: var(--pd-tinta-suave);
  font-weight: 400;
}

.pd-enlace--secundario:hover { color: var(--pd-tinta); }

.pd-enlace-simple {
  display: inline-flex;
  align-items: center;
  min-height: var(--pd-tactil);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- Tarjetas ------------------------------------------------------------
   El color de sector es ACENTO: filo superior e icono. Nunca fondo de
   tarjeta completa — está prohibido en AGENTS.md. */
.pd-tarjeta {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--pd-radio-xl);
  background: var(--pd-papel);
  box-shadow: var(--pd-sombra-baja);
  transition: box-shadow 0.2s ease-out;
}

.pd-tarjeta:hover { box-shadow: var(--pd-sombra-media); }

.pd-tarjeta__filo {
  height: 6px;
  width: 100%;
  flex-shrink: 0;
}

.pd-tarjeta__filo--espacios { background-color: var(--pd-espacios); }
.pd-tarjeta__filo--comercios { background-color: var(--pd-comercios); }
.pd-tarjeta__filo--formacion { background-color: var(--pd-formacion); }
/* Digital+60 lleva el degradado COMPLETO: es lo que la distingue de las
   líneas de Plaza Digital sin necesidad de etiquetarla con palabras. */
.pd-tarjeta__filo--degradado { background-image: var(--pd-degradado); }

.pd-tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem var(--pd-borde);
}

.pd-tarjeta__cuerpo > * + * { margin-top: 0.75rem; }

.pd-tarjeta__icono { margin-bottom: 0.75rem; }

.pd-tarjeta h3 {
  font-size: var(--pd-txt-xl);
  line-height: 1.3;
}

.pd-tarjeta__claim {
  font-weight: 500;
  color: var(--pd-tinta);
}

/* mt-auto: los CTA quedan alineados aunque los textos midan distinto.

   ⚠️ Esto se queda en bloque. Llegó a ser una columna flex con `gap` para
   separar el botón del pop-up de Espacios de su enlace, y el `gap` se sumó a
   los márgenes que ya tenían los tres elementos del pie de Digital+60: 24px
   más de alto en esa tarjeta, medidos en producción. Lo que necesita aire es
   el botón, así que el aire lo pone el botón. */
.pd-tarjeta__pie {
  margin-top: auto;
  padding-top: 1.5rem;
}

/* Punto con peso propio dentro de la tarjeta, con su filete separador. */
.pd-destacado {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--pd-linea);
  color: var(--pd-tinta);
}

.pd-destacado svg { flex-shrink: 0; margin-top: 0.15rem; }

/* --- Lista con iconos ---------------------------------------------------- */
.pd-lista {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--pd-tinta-suave);
}

.pd-lista svg { flex-shrink: 0; margin-top: 0.25rem; color: var(--pd-tinta); }

.pd-seccion--tinta .pd-lista li { color: rgba(255, 255, 255, 0.85); }
.pd-seccion--tinta .pd-lista svg { color: var(--pd-papel); }

/* --- Columna de «Así trabajamos» ----------------------------------------- */
.pd-columna__filo {
  width: 3.5rem;
  height: 4px;
  background-image: var(--pd-degradado);
}

.pd-columna h3 {
  margin-top: 1rem;
  font-size: var(--pd-txt-2xl);
}

.pd-columna svg { margin-top: 1.5rem; }
.pd-columna p { margin-top: 1rem; }

/* --- Marco de imagen ----------------------------------------------------- */
.pd-marco {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--pd-radio-xl);
  background: var(--pd-papel-2);
}

.pd-marco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.pd-marco__vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 100%;
  padding: 2rem;
  text-align: center;
  color: var(--pd-tinta-suave);
}

.pd-marco--mapa {
  aspect-ratio: 4 / 3;
  border-radius: var(--pd-radio-xl);
}

@media (width >= 64rem) {
  .pd-marco--mapa { aspect-ratio: auto; height: 100%; min-height: 32rem; }
}

.pd-marco--mapa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Caja con borde, la del formulario y las vías alternativas ------------ */
.pd-caja {
  padding: 2rem var(--pd-borde);
  border: 2px solid var(--pd-linea);
  border-radius: var(--pd-radio-xl);
  background: var(--pd-papel);
}

.pd-caja > * + * { margin-top: 1rem; }

.pd-via {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--pd-tinta);
  border-radius: var(--pd-radio-lg);
  color: var(--pd-tinta);
  font-size: var(--pd-txt-lg);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.pd-via:hover { background: var(--pd-tinta); color: var(--pd-papel); }

.pd-nota {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--pd-radio-lg);
  background: var(--pd-papel-2);
  color: var(--pd-tinta-suave);
  font-size: var(--pd-txt-base);
}

.pd-nota svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--pd-tinta); }


/* ==========================================================================
   7. HERO
   ========================================================================== */

/* `svh` y no `vh`: en móvil, `vh` cuenta la barra del navegador y recorta
   justo los botones. Y es min-height, no height: si el contenido no cabe
   —portátiles de 768px— la sección crece y se ve entera.
   `isolate` es lo que hace que el z-index negativo del anillo funcione. */
.pd-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--pd-barra-alto));
  background: var(--pd-papel);
  overflow: clip;
}

.pd-hero__interior {
  width: 100%;
  max-width: var(--pd-contenido);
  margin: auto; /* reparte el sobrante y deja la curva pegada abajo */
  padding-inline: var(--pd-borde);
  padding-top: clamp(1rem, 0.5rem + 3vw, 3.5rem);
  padding-bottom: clamp(2rem, 1rem + 4vw, 4rem);
}

/* El texto ocupa como mucho algo más de la mitad: el anillo entra por la
   derecha y el titular tiene que leerse sobre papel limpio. */
.pd-hero__texto {
  position: relative;
  z-index: 1;
  max-width: 34rem;
}

@media (width >= 64rem) {
  .pd-hero__texto { max-width: 42rem; }
}

/* ⚠️ ESTE es el H1, aunque se vea como antetítulo. Coincide con el dominio y
   con el meta title, que es de lo que va la jugada. El documento de copys
   pedía 12px; se queda en 16-17 porque el suelo de 16px no se negocia. */
.pd-hero__h1 {
  font-size: var(--pd-txt-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--pd-tinta-suave);
}

/* El titular grande es un H2: lleva el peso visual, no el semántico. */
.pd-hero__titular {
  margin-top: 0.75rem;
  font-size: var(--pd-txt-5xl);
  line-height: 1.04;
}

.pd-hero__entradilla { margin-top: 1.25rem; }
.pd-hero__entradilla > * + * { margin-top: 1rem; }
.pd-hero__botonera { margin-top: 1.5rem; }

/* --- El anillo -----------------------------------------------------------
   ⚠️ ESTO NO ES UN BUG. Incumple AGENTS.md a sabiendas, por decisión expresa
   del responsable del proyecto, y está registrado en docs/excepciones-
   aceptadas.md: el giro continuo invierte el degradado durante media vuelta,
   y en móvil el anillo cruza el texto y pasa del 10% de superficie.
   `prefers-reduced-motion` NO es opcional: ver más abajo. */
.pd-hero__anillo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Las tres magnitudes van en vw a propósito: los porcentajes de `bottom` se
   calculan sobre la ALTURA y los de `width`/`right` sobre la ANCHURA, así que
   mezclarlos descuadra el anillo al cambiar de móvil. */
.pd-hero__anillo img {
  position: absolute;
  bottom: -90vw;
  right: -91vw;
  width: 175vw;
  max-width: none;
  transform-origin: center;
  rotate: 270deg;
  animation: pd-giro 20s linear infinite;
}

@media (width >= 40rem) {
  .pd-hero__anillo img {
    bottom: -44%;
    right: -32%;
    width: 80%;
    rotate: 0deg;
  }
}

@media (width >= 64rem) {
  .pd-hero__anillo img { bottom: -50%; right: -20%; width: 54%; }
}

/* `linear` a propósito: un easing haría que la vuelta acelerase y frenase, y
   en un giro infinito ese pulso se lee como un tirón cada vuelta. */
@keyframes pd-giro {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}


/* ==========================================================================
   8. CABECERA Y MENÚ MÓVIL

   Fondo SÓLIDO, sin blur ni translucidez: el glassmorphism está prohibido en
   este proyecto, y además con fondo translúcido se leía el contenido por
   detrás al hacer scroll.

   La barra no baja de 111px porque el logotipo mide 120px de ancho mínimo por
   manual, y a esa escala tiene 95px de alto.
   ========================================================================== */

.pd-barra {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  height: var(--pd-barra-alto);
  border-bottom: 1px solid var(--pd-linea);
  background: var(--pd-papel);
  transition: height 0.3s ease-out;
}

.pd-barra[data-condensada="true"] {
  height: var(--pd-barra-alto-min);
  box-shadow: var(--pd-sombra-baja);
}

.pd-barra__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 100%;
  max-width: var(--pd-contenido);
  margin-inline: auto;
  padding-inline: 1rem; /* apretado a 320px para que quepa el logotipo */
}

@media (width >= 40rem) {
  .pd-barra__interior { gap: 1rem; padding-inline: var(--pd-borde); }
}

.pd-barra__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: var(--pd-tactil);
  padding: 0.25rem;
  margin-left: -0.25rem;
  border-radius: var(--pd-radio-md);
}

.pd-nav { display: none; }

@media (width >= 64rem) {
  .pd-nav { display: block; }
}

.pd-nav ul {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.pd-nav__enlace {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--pd-tactil);
  padding-inline: 0.5rem;
  border-radius: var(--pd-radio-md);
  color: var(--pd-tinta);
  font-size: var(--pd-txt-base);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap; /* si rompen en dos líneas, engordan la barra */
}

@media (width >= 80rem) {
  .pd-nav__enlace { padding-inline: 0.75rem; }
}

.pd-nav__texto { position: relative; display: inline-block; }

.pd-nav__arco {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  margin-top: 0.25rem;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}

.pd-nav__enlace:hover .pd-nav__arco,
.pd-nav__enlace:focus-visible .pd-nav__arco,
.pd-nav__enlace[aria-current] .pd-nav__arco {
  opacity: 1;
}

.pd-barra__acciones { display: flex; align-items: center; gap: 0.5rem; }

.pd-barra__cta { display: none; }

@media (width >= 40rem) {
  .pd-barra__cta { display: inline-flex; }
}

/* Llamar, solo en móvil. Lleva el degradado con el icono en blanco: es la
   acción de contacto directo. Usa el tramo morado→magenta porque el naranja
   deja el blanco en 2,55:1. */
.pd-icono-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pd-tactil);
  height: var(--pd-tactil);
  flex-shrink: 0;
  border: 0;
  border-radius: var(--pd-radio-md);
  background: transparent;
  color: var(--pd-tinta);
  cursor: pointer;
}

.pd-icono-boton--marca {
  background-image: var(--pd-degradado-texto);
  color: var(--pd-papel);
  box-shadow: var(--pd-sombra-baja);
}

@media (forced-colors: active) {
  .pd-icono-boton--marca { border: 1px solid ButtonText; }
}

@media (width >= 64rem) {
  .pd-icono-boton { display: none; }
}

/* --- Menú móvil ---------------------------------------------------------- */
.pd-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--pd-papel);
}

.pd-menu[hidden] { display: none; }

@media (width >= 64rem) {
  .pd-menu { display: none; }
}

/* Replica la cabecera al píxel, incluida la altura condensada: si no, el
   logotipo salta al abrir y cerrar el menú. El borde transparente iguala el
   modelo de caja con el `border-bottom` de la barra. */
.pd-menu__cabecera {
  flex-shrink: 0;
  height: var(--pd-barra-alto);
  border-bottom: 1px solid transparent;
}

.pd-menu__cabecera[data-condensada="true"] { height: var(--pd-barra-alto-min); }

.pd-menu__nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem var(--pd-borde) 2rem;
  overflow-y: auto;
}

/* Los enlaces NO se estiran para repartirse la pantalla: en un móvil alto
   cada fila crecía hasta 100px y la lista se leía como pancartas, no como un
   menú. 56px es holgado sobre los 48px de objetivo táctil. */
.pd-menu__lista li { border-bottom: 1px solid var(--pd-linea); }

.pd-menu__enlace {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3.5rem;
  padding-block: 0.5rem;
  color: var(--pd-tinta);
  font-size: var(--pd-txt-lg);
  font-weight: 500;
  text-decoration: none;
}

.pd-menu__acciones {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: auto;
}

.pd-menu__cerrar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--pd-tactil);
  padding-inline: 1rem;
  border: 2px solid var(--pd-tinta);
  border-radius: var(--pd-radio-md);
  background: transparent;
  color: var(--pd-tinta);
  font-size: var(--pd-txt-base);
  font-weight: 500;
  cursor: pointer;
}


/* ==========================================================================
   9. ACORDEÓN

   La altura se anima con grid-template-rows y no con max-height: no hay que
   adivinar un máximo ni queda retardo al cerrar contenidos cortos.
   ========================================================================== */

.pd-acordeon { border-top: 1px solid var(--pd-linea); max-width: 52rem; }

.pd-acordeon__item { border-bottom: 1px solid var(--pd-linea); }

.pd-acordeon__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  min-height: 4rem;
  padding-block: 1.25rem;
  border: 0;
  background: none;
  color: var(--pd-tinta);
  font-size: var(--pd-txt-lg);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s ease-out;
}

.pd-acordeon__boton:hover { color: var(--pd-marca-2); }

.pd-acordeon__caret {
  flex-shrink: 0;
  transition: rotate 0.2s ease-out;
}

.pd-acordeon__item[data-abierto="true"] .pd-acordeon__caret { rotate: 180deg; }

.pd-acordeon__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease-out;
}

/* `visibility` además de la altura cero: sin ella un lector de pantalla lee
   las respuestas de todas las preguntas aunque estén cerradas. */
.pd-acordeon__panel > div {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0.22s;
}

.pd-acordeon__item[data-abierto="true"] .pd-acordeon__panel { grid-template-rows: 1fr; }
.pd-acordeon__item[data-abierto="true"] .pd-acordeon__panel > div { visibility: visible; }

.pd-acordeon__panel p {
  max-width: var(--pd-medida);
  padding: 0 2rem 1.5rem 0;
  color: var(--pd-tinta-suave);
}


/* ==========================================================================
   10. FORMULARIO (Contact Form 7)

   Los números salen de AGENTS.md: campos de 52px, objetivos de 48px, texto
   que nunca baja de 16px y bordes con 3:1 de contraste (WCAG 1.4.11).
   ========================================================================== */

.pd-form .wpcf7-form-control-wrap { display: block; width: 100%; }

/* Trampa para bots: fuera de pantalla y sin ocupar sitio. NO se usa
   `display:none` ni `visibility:hidden` a propósito — muchos robots detectan
   esas dos y se saltan el campo, que es justo lo que no queremos. */
.pd-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pd-form label { display: block; font-weight: 500; color: var(--pd-tinta); }

.pd-form .pd-ayuda {
  margin-top: 0.25rem;
  font-size: var(--pd-txt-sm);
  color: var(--pd-tinta-suave);
}

.pd-form .pd-campo { margin-bottom: 1.5rem; }

.pd-form .pd-obligatorio { margin-left: 0.25rem; color: var(--pd-marca-2); }

.pd-form input[type="text"],
.pd-form input[type="tel"],
.pd-form input[type="email"],
.pd-form select,
.pd-form textarea {
  width: 100%;
  margin-top: 0.5rem;
  padding-inline: 1rem;
  border: 2px solid var(--pd-linea-campo);
  border-radius: var(--pd-radio-md);
  background: var(--pd-papel);
  color: var(--pd-tinta);
  font-size: var(--pd-txt-base);
  transition: border-color 0.15s ease-out;
}

.pd-form input[type="text"],
.pd-form input[type="tel"],
.pd-form input[type="email"],
.pd-form select {
  height: var(--pd-campo);
}

.pd-form textarea { padding-block: 0.75rem; line-height: 1.6; }

.pd-form input:hover,
.pd-form select:hover,
.pd-form textarea:hover { border-color: var(--pd-tinta); }

/* El color nunca es el único indicador: además sale el mensaje de texto. */
.pd-form [aria-invalid="true"] { border-color: var(--pd-marca-2); }

.pd-form select {
  appearance: none;
  padding-inline-end: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.2rem;
}

/* La casilla va dentro del label: todo el bloque es zona pulsable, muy por
   encima de los 48px, en vez de un cuadradito de 28. */
.pd-acepta .wpcf7-list-item { margin: 0; }

.pd-acepta label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: var(--pd-tactil);
  cursor: pointer;
}

.pd-acepta input[type="checkbox"] {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin-top: 0.125rem;
  accent-color: var(--pd-marca-2);
}

.pd-form .pd-enviar {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.875rem 2rem;
  border: 0;
  border-radius: var(--pd-radio-full);
  background-image: var(--pd-degradado-texto);
  color: var(--pd-papel);
  font-size: var(--pd-txt-lg);
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--pd-sombra-baja);
  transition: box-shadow 0.15s, filter 0.15s, transform 0.15s;
}

@media (width >= 40rem) {
  .pd-form .pd-enviar { width: auto; }
}

.pd-form .pd-enviar:hover { box-shadow: var(--pd-sombra-media); filter: brightness(1.1); }
.pd-form .pd-enviar:active { transform: translateY(1px); }
.pd-form .pd-enviar:disabled { opacity: 0.45; pointer-events: none; }

@media (forced-colors: active) {
  .pd-form .pd-enviar { border: 1px solid ButtonText; }
}

/* Los mensajes de CF7 vienen en 13px y gris claro: las dos cosas incumplen
   las reglas del proyecto. */
.pd-form .wpcf7-not-valid-tip {
  margin-top: 0.5rem;
  color: var(--pd-marca-2);
  font-size: var(--pd-txt-sm);
  font-weight: 500;
}

/* CF7 envuelve sus campos ocultos en un <fieldset>. Su hoja de estilos lo
   esconde, pero aquí no se carga —pesa y solo se usa para esto—, así que el
   navegador le pintaba su borde por defecto: una caja vacía de 23px justo
   encima del formulario. */
.wpcf7 .hidden-fields-container {
  display: none;
}

/* Y el aviso de respuesta se imprime SIEMPRE, vacío mientras no hay nada que
   decir. Sale otra caja igual debajo del botón. Se oculta mientras esté
   vacío en vez de listar los estados de CF7: así cualquier mensaje que
   añadan en el futuro aparece solo, sin tener que mantener la lista. */
.wpcf7-response-output:empty {
  display: none;
}

.wpcf7-response-output {
  margin: 1.5rem 0 0;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: var(--pd-radio-md);
  background: var(--pd-papel-2);
  box-shadow: inset 0 0 0 1px var(--pd-linea);
  color: var(--pd-tinta);
  font-size: var(--pd-txt-base);
  font-weight: 500;
}

.wpcf7 form.sent .wpcf7-response-output { box-shadow: inset 0 0 0 2px #0f7a3d; }

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output { box-shadow: inset 0 0 0 2px var(--pd-marca-2); }


/* ==========================================================================
   11. PIE
   ========================================================================== */

.pd-pie {
  background: var(--pd-tinta);
  color: var(--pd-papel);
  padding-block: var(--pd-seccion-corta);
}

.pd-pie__rejilla {
  display: grid;
  gap: 3rem;
}

@media (width >= 48rem) {
  .pd-pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width >= 64rem) {
  .pd-pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; }
}

.pd-pie h2 { font-size: var(--pd-txt-lg); }

.pd-pie__lista {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, 0.85);
}

.pd-pie__lista li { display: flex; align-items: flex-start; gap: 0.75rem; }
.pd-pie__lista svg { flex-shrink: 0; margin-top: 0.25rem; color: rgba(255, 255, 255, 0.7); }

.pd-pie__enlaces {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 1.25rem;
}

/* `li > a`, y no solo `a`: los enlaces del pie vienen de un menú de WordPress,
   que los envuelve en `<li>`. El objetivo táctil de 48px va en el enlace. */
.pd-pie__enlaces li { list-style: none; }

.pd-pie__enlaces a {
  display: flex;
  align-items: center;
  min-height: var(--pd-tactil);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.pd-pie__enlaces a:hover { color: var(--pd-papel); text-decoration: underline; text-underline-offset: 4px; }

.pd-pie__descripcion { max-width: var(--pd-medida); margin-top: 1.5rem; color: rgba(255, 255, 255, 0.8); }

.pd-pie__legal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--pd-linea-inversa);
}

@media (width >= 40rem) {
  .pd-pie__legal { flex-direction: row; align-items: center; justify-content: space-between; }
}

.pd-pie__legal p { font-size: var(--pd-txt-sm); color: rgba(255, 255, 255, 0.7); }

.pd-pie__legal ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }

.pd-pie__legal a {
  display: flex;
  align-items: center;
  min-height: var(--pd-tactil);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--pd-txt-sm);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* El correo es un token de 32 caracteres sin puntos de corte naturales, y a
   320px empujaba el ancho mínimo del pie hasta desbordar en horizontal. */
.pd-romper { overflow-wrap: anywhere; }


/* ==========================================================================
   12. PROSA — las páginas legales.

   El cuerpo se queda en la base de 18/19px también aquí: un texto legal es
   justo el que más gente va a leer con dificultad, y encogerlo «porque es
   letra pequeña» sería la costumbre que este proyecto no quiere.
   ========================================================================== */

.pd-prosa > * + * { margin-top: 1.25rem; }

.pd-prosa h2 { margin-top: 3rem; font-size: var(--pd-txt-xl); }
.pd-prosa h3 { margin-top: 2rem; font-size: var(--pd-txt-lg); }

/* `overflow-wrap` no es cosmético aquí. Estas páginas las escribe el cliente
   en el editor, y en ellas caben correos, dominios y URLs: palabras largas sin
   espacios que el navegador NO parte por su cuenta. A 320px se salían del
   renglón —el correo del centro desbordaba 8px en el aviso legal y en
   privacidad— y sacaban barra horizontal a toda la página.

   Va aquí, en la regla base, y no en la clase `.pd-romper`, porque esa hay que
   acordarse de ponerla. Nadie deberia tener que saber una clase de CSS para
   escribir su propio correo en una lista. */
.pd-prosa p,
.pd-prosa li {
  color: var(--pd-tinta-suave);
  overflow-wrap: break-word;
}

.pd-prosa ul, .pd-prosa ol { padding-inline-start: 1.5rem; list-style: disc; }
.pd-prosa ol { list-style: decimal; }
.pd-prosa li + li { margin-top: 0.5rem; }

.pd-prosa a {
  display: inline-flex;
  align-items: center;
  min-height: var(--pd-tactil);
  color: var(--pd-tinta);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pd-prosa a:hover { text-decoration-color: var(--pd-marca-2); }
.pd-prosa strong { color: var(--pd-tinta); font-weight: 700; }


/* ==========================================================================
   13. ENTRADAS AL SCROLL

   El HTML sale VISIBLE. Es el JavaScript el que esconde los elementos justo
   antes de observarlos, añadiéndoles `data-esperando`. Si el script no llega,
   o falla, o no hay JavaScript, la página se lee entera. El caso por defecto
   tiene que ser el bueno.
   ========================================================================== */

[data-reveal] {
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal][data-esperando] {
  opacity: 0;
  transform: translateY(16px);
}

/* El arco se revela con un recorte, NO animando stroke-dasharray: el SVG se
   estira con preserveAspectRatio="none" mientras el trazo se pinta en píxeles
   de pantalla, así que los guiones se calculan sobre otra geometría y el arco
   sale partido en dos. Comprobado. */
[data-arco] {
  clip-path: inset(-50% 0% -50% 0%);
  transition: clip-path 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-arco][data-esperando] { clip-path: inset(-50% 100% -50% 0%); }


/* ==========================================================================
   MOVIMIENTO REDUCIDO

   ⚠️ AGENTS.md exige respetarlo en cada animación, sin excepción. Con el
   público de este sitio no se negocia.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Al pararse el giro, el `rotate` del tramo móvil vuelve a aplicarse solo,
     así que quien pide movimiento reducido ve el anillo aprobado en ronda 4. */
  .pd-hero__anillo img { animation: none !important; }

  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-arco] { clip-path: none !important; }
}


/* ==========================================================================
   14. UTILIDADES MÍNIMAS

   Deliberadamente pocas. Están para los ajustes finos que se hacen desde el
   editor sin tener que abrir esta hoja; todo lo demás debería ser una clase
   con nombre. Si te descubres encadenando cinco utilidades, es señal de que
   falta un componente.
   ========================================================================== */

.pd-medida { max-width: var(--pd-medida); }
.pd-centrado { text-align: center; }
.pd-lleno { width: 100%; }

.pd-mt-0 { margin-top: 0; }
.pd-mt-1 { margin-top: 0.5rem; }
.pd-mt-2 { margin-top: 1rem; }
.pd-mt-3 { margin-top: 1.5rem; }
.pd-mt-4 { margin-top: 2rem; }
.pd-mt-5 { margin-top: 3rem; }
.pd-mt-6 { margin-top: 4rem; }

.pd-flujo > * + * { margin-top: 1rem; }
.pd-flujo-amplio > * + * { margin-top: 1.5rem; }

.pd-txt-sm { font-size: var(--pd-txt-sm); }
.pd-txt-lg { font-size: var(--pd-txt-lg); }
.pd-txt-xl { font-size: var(--pd-txt-xl); }
.pd-suave { color: var(--pd-tinta-suave); }
.pd-negrita { font-weight: 700; }
.pd-media { font-weight: 500; }


/* ==========================================================================
   15. POP-UP DE ESPACIOS

   Las tres salas en alquiler, dentro de un `<dialog>` con pestañas. Lo pinta
   `[pd_salas]` desde `inc/espacios.php`, y lo abre y lo cierra el módulo de
   `assets/js/sitio.js`.

   ⚠️ El color de sector (#D900CA) NO toca ningún texto: da 4,37:1 sobre papel
   y no llega al 4,5:1 de AA. Se queda en el borde y en la barra de la pestaña
   activa, que son componentes de interfaz y les basta 3:1.
   ========================================================================== */

/* --- El botón que lo abre ------------------------------------------------
   Sale con `hidden` desde el servidor y lo descubre el script: sin JavaScript
   la tarjeta se queda como está hoy, en vez de enseñar un botón muerto.

   `display: flex` en vez del `inline-flex` que trae `.pd-boton`: dentro del
   pie de la tarjeta necesita su propia línea, porque el enlace que va debajo
   también es inline y si no se pondrían los dos de lado. `width: fit-content`
   le devuelve el ancho de su texto. Y el aire lo pone él, no el pie: un `gap`
   en el pie se sumaría a los márgenes de la tarjeta de Digital+60. */
.pd-salas__abrir {
  display: flex;
  width: fit-content;
  margin-bottom: 0.75rem;
}

/* Gana a la regla de arriba: con `hidden` no se pinta. */
.pd-salas__abrir[hidden] { display: none; }

/* --- La caja -------------------------------------------------------------
   En móvil ocupa la pantalla entera, sin márgenes ni esquinas: los 12px de
   aire por lado eran 24px de alto que en un teléfono no sobran. Desde 40rem
   vuelve a ser la caja centrada.

   Alturas en `dvh` y no en `vh`: con `vh`, la barra del navegador móvil se
   come el pie del diálogo y los dos botones quedan fuera de alcance. */
.pd-salas {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background-color: var(--pd-papel);
  color: var(--pd-tinta);
}

/* `[open]` y no a secas: las reglas de autor ganan a la hoja del navegador,
   así que un `display: flex` incondicional pisaría el
   `dialog:not([open]) { display: none }` de la UA y la caja se vería siempre,
   cerrada o no. */
.pd-salas[open] {
  display: flex;
  flex-direction: column;
}

.pd-salas::backdrop { background-color: rgba(26, 26, 26, 0.6); }

@media (width >= 40rem) {
  .pd-salas {
    width: calc(100% - 1.5rem);
    max-width: 57.5rem;
    height: auto;
    max-height: calc(100dvh - 1.5rem);
    margin: auto;
    border-radius: var(--pd-radio-lg);
    box-shadow: var(--pd-sombra-media);
  }
}

/* --- El hilo que se desplaza en móvil ------------------------------------
   ⚠️ Esto es lo que arregla el fallo de la ronda 7. En móvil, todo lo que no
   es el pie va en UN solo hilo con scroll propio. Repartir el alto entre
   cabecera, pestañas y ficha solo funciona mientras las tres quepan: con el
   texto del sistema agrandado, la cabecera y las pestañas pedían 535px de los
   553 disponibles y a la ficha le quedaban 17 — de ahí la foto aplastada a
   una franja y el botón montado encima.

   `min-height: 0` es imprescindible: sin él un hijo flex no baja de su tamaño
   de contenido y vuelve a aplastarse en vez de desbordar y generar scroll.

   Desde 40rem el envoltorio desaparece con `display: contents` y sus hijos
   vuelven a ser hijos directos del diálogo: el reparto de siempre, intacto,
   porque en escritorio nunca hubo problema. */
.pd-salas__hilo {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (width >= 40rem) {
  .pd-salas__hilo { display: contents; }
}

/* --- Cabecera ------------------------------------------------------------
   Pegada arriba en móvil para que el botón de cerrar no se vaya nunca de
   pantalla; las pestañas sí se desplazan, que es lo que le devuelve el sitio
   a la ficha. */
.pd-salas__cabecera {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem var(--pd-borde) 0.5rem;
  background-color: var(--pd-papel);
}

@media (width >= 40rem) {
  .pd-salas__cabecera {
    position: static;
    padding: 1.75rem var(--pd-borde) 0;
  }
}

/* Más pequeño que `.pd-titular`: es el titular de un diálogo, no de una
   sección. El `padding-bottom` reserva el sitio del arco. */
.pd-salas__titulo {
  font-size: var(--pd-txt-2xl);
  font-weight: 700;
  line-height: 1.18;
  padding-bottom: 0.34em;
}

.pd-salas__direccion { display: none; }

@media (width >= 40rem) {
  .pd-salas__direccion { display: inline; }
}

.pd-salas__cerrar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--pd-tactil);
  height: var(--pd-tactil);
  padding: 0;
  border: 2px solid var(--pd-tinta);
  border-radius: var(--pd-radio-full);
  background-color: transparent;
  color: var(--pd-tinta);
  cursor: pointer;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.pd-salas__cerrar:hover {
  background-color: var(--pd-tinta);
  color: var(--pd-papel);
}

/* --- Pestañas ------------------------------------------------------------
   Fila que se reparte sola, no una tira que se arrastra de lado: el prototipo
   dejaba la tercera sala medio fuera del encuadre en un móvil.

   La base va en `rem` a propósito. «Despacho» mide 84px a 18px de cuerpo y
   necesita 104 de celda; a 360px solo hay 101. Con `flex-wrap` y base de
   6,6rem la tercera se va a una segunda fila y ocupa el ancho entero cuando
   no cabe, en vez de salir cortada — y la cuenta se recalcula sola cuando
   alguien agranda el texto del sistema, que es el caso que rompía el pop-up. */
.pd-salas__pestanas {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem var(--pd-borde);
  border-bottom: 1px solid var(--pd-linea);
}

@media (width >= 40rem) {
  .pd-salas__pestanas { gap: 0.625rem; padding-block: 1.25rem; }
}

/* `padding-bottom` reserva el sitio de la barra en TODAS las pestañas, no
   solo en la activa: si el hueco apareciera al seleccionar, la fila entera
   daría un salto a cada cambio de sala. */
.pd-salas__pestana {
  position: relative;
  flex: 1 1 6.6rem;
  min-height: 3.5rem;
  padding: 0.625rem 0.5rem 1.25rem;
  border: 2px solid var(--pd-linea);
  border-radius: var(--pd-radio-sm);
  background-color: var(--pd-papel-2);
  color: var(--pd-tinta);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}

@media (width >= 40rem) {
  .pd-salas__pestana {
    min-height: 4rem;
    padding: 0.875rem 0.875rem 1.5rem;
  }
}

.pd-salas__pestana:hover { border-color: var(--pd-tinta-suave); }

.pd-salas__pestana[aria-selected="true"] {
  border-color: var(--pd-espacios);
  background-color: var(--pd-papel);
}

.pd-salas__pestana-nombre {
  display: block;
  font-size: var(--pd-txt-base);
  font-weight: 700;
}

.pd-salas__largo { display: none; }
.pd-salas__pestana-resumen { display: none; }

@media (width >= 40rem) {
  .pd-salas__corto { display: none; }
  .pd-salas__largo { display: inline; }

  .pd-salas__pestana-resumen {
    display: block;
    margin-top: 0.375rem;
    font-size: var(--pd-txt-sm);
    color: var(--pd-tinta-suave);
  }
}

/* La marca que NO depende del color: la activa tiene barra y las otras no.
   `currentColor` la mantiene visible en modo de colores forzados, donde el
   color de sector desaparece. */
.pd-salas__barra {
  position: absolute;
  inset-inline: 0.5rem;
  bottom: 0.625rem;
  display: block;
  height: 0.25rem;
  border-radius: var(--pd-radio-full);
  background-color: var(--pd-espacios);
  opacity: 0;
  pointer-events: none;
}

.pd-salas__pestana[aria-selected="true"] .pd-salas__barra { opacity: 1; }

@media (width >= 40rem) {
  .pd-salas__barra { inset-inline: 0.875rem; bottom: 0.75rem; }
}

@media (forced-colors: active) {
  .pd-salas__barra { background-color: currentColor; }
}

/* --- Fichas --------------------------------------------------------------
   En escritorio, `min-height: 0` deja que el panel activo se lleve el
   sobrante y se desplace por dentro en vez de estirar el diálogo. En móvil no
   reparte nada: el que se desplaza es el hilo de fuera. */
.pd-salas__cuerpo { display: flex; flex-direction: column; }

@media (width >= 40rem) {
  .pd-salas__cuerpo { flex: 1; min-height: 0; }
}

.pd-salas__panel { padding: 1.25rem var(--pd-borde); }
.pd-salas__panel[hidden] { display: none; }

@media (width >= 40rem) {
  .pd-salas__panel {
    flex: 1;
    overflow-y: auto;
    padding-block: 1.75rem;
  }
}

.pd-salas__rejilla { display: grid; gap: 1.25rem; }

@media (width >= 48rem) {
  .pd-salas__rejilla { grid-template-columns: 1.15fr 1fr; gap: 2.25rem; }
}

/* 16:9 mientras la foto va a todo lo ancho, 4:3 cuando pasa a la columna de
   la izquierda. En un teléfono el 4:3 se llevaba 244px de los 355 que tenía
   el cuerpo entero y no dejaba sitio ni para el titular de la sala. */
.pd-salas__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--pd-radio-md);
  background-color: var(--pd-papel-2);
}

@media (width >= 48rem) {
  .pd-salas__foto { aspect-ratio: 4 / 3; }
}

.pd-salas__ficha h3 {
  font-size: var(--pd-txt-lg);
  font-weight: 700;
  line-height: 1.25;
}

.pd-salas__para {
  margin-top: 0.625rem;
  color: var(--pd-tinta-suave);
}

/* La cifra grande arriba y la etiqueta debajo, pero en el marcado va primero
   el término: es el orden que exige una lista de definiciones y el que se lee
   bien en voz alta. Lo invierte `column-reverse`. */
.pd-salas__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.25rem;
  margin-top: 1.5rem;
  padding-block: 1rem;
  border-block: 1px solid var(--pd-linea);
}

.pd-salas__dato { display: flex; flex-direction: column-reverse; }

.pd-salas__dato dt {
  font-size: var(--pd-txt-sm);
  color: var(--pd-tinta-suave);
}

.pd-salas__dato dd {
  margin: 0;
  font-size: var(--pd-txt-2xl);
  font-weight: 700;
  line-height: 1.15;
}

.pd-salas__incluye { margin-top: 1.5rem; }

.pd-salas__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0;
  list-style: none;
}

.pd-salas__etiquetas li {
  padding: 0.375rem 0.75rem;
  border-radius: var(--pd-radio-sm);
  background-color: var(--pd-papel-2);
  box-shadow: inset 0 0 0 1px var(--pd-linea);
  font-size: var(--pd-txt-sm);
  color: var(--pd-tinta-suave);
}

.pd-salas__reserva {
  margin-top: 1.5rem;
  color: var(--pd-tinta-suave);
}

/* --- Pie -----------------------------------------------------------------
   Fijo abajo: por larga que sea la ficha, reservar está siempre a la vista. */
.pd-salas__pie {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem var(--pd-borde);
  border-top: 1px solid var(--pd-linea);
  background-color: var(--pd-papel-2);
}

@media (width >= 40rem) {
  .pd-salas__pie { gap: 0.75rem; padding-block: 1.25rem; }
}

.pd-salas__cta { flex: 1 1 13rem; }