/* ==========================================================================
   LAURA TRIGUERO · ABOGADA — hoja de estilos única de toda la web

   Este fichero lo comparten TODAS las páginas. Un cambio de color o de
   tipografía aquí afecta a la web entera: no hay copias que sincronizar.

   Es también única para escritorio, tablet y móvil: no hay versiones
   separadas por dispositivo. Los @media adaptan el mismo HTML.

   Reglas: sin !important, sin duplicar bloques por dispositivo.
   Ver INSTRUCCIONES-IA.md antes de editar.

   Índice:
      0. Tipografías (servidas desde este dominio, no desde Google)
      1. Tokens (colores, tipografías, medidas)
      2. Reset y base
      3. Tipografía y elementos comunes (botones, enlaces, eyebrow)
      4. Cabecera
      5. Layout de secciones
      6. Hero (portada)
      7. Forma de trabajar (principios)
      8. Servicios (resumen de la portada)
      9. Modalidades
     10. Reseñas
     11. CTA final
     12. Barra flotante de contacto
     13. Pie
     14. Animaciones
     15. Responsive de la portada (tablet ≤ 900px, móvil ≤ 620px)
     16. Páginas interiores: cabecera de página y áreas de práctica
     17. Responsive de las páginas interiores
     18. Blog
     19. Contacto (formulario, modalidades, mapa)
     20. Responsive de contacto
   ========================================================================== */

/* --- 0. Tipografías ------------------------------------------------------
   Se sirven desde este mismo dominio (assets/fonts/), no desde Google.
   Motivo: pedirlas a Google enviaba la dirección IP de cada visitante a sus
   servidores en cada visita, y eso hay que declararlo en la política de
   privacidad como transferencia a un tercero. Así la web no hace NINGUNA
   llamada externa al cargar una página.

   Las declaraciones son copia literal de las que servía Google, con la ruta
   cambiada a local: el aspecto es exactamente el de antes, sin inventar nada.
   Los dos ficheros son variables —uno por familia cubre todos los pesos—, por
   eso seis declaraciones apuntan a solo dos ficheros.

   Si hay que actualizarlas algún día, ver INSTRUCCIONES-IA.md.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/inter.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: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/libre-baskerville.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: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/libre-baskerville.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;
}

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Paleta */
  --offwhite:   #FAF7F2;  /* fondo general de la página */
  --cream:      #DCCBC7;  /* bandas hero y modalidades */
  --cream-deep: #E8DEDB;  /* bandas forma de trabajar y reseñas */
  --rose:       #CBB4B0;  /* bandas servicios y CTA final + bordes */
  --sand:       #F6F1EB;  /* fondo continuo de las áreas de práctica */
  --charcoal:   #383638;  /* texto principal */
  --muted:      #766667;  /* texto secundario y botones */
  --accent:     #A58A89;  /* acentos, iconos, estrellas */
  --white:      #FFF9F7;  /* texto sobre fondo oscuro */

  /* Derivados */
  --line:       rgba(56, 54, 56, .22);  /* bordes finos sobre banda de color */
  --line-soft:  rgba(56, 54, 56, .14);
  --card-bg:    rgba(250, 247, 242, .45);

  /* Tipografías */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;

  /* Medidas */
  --max: 1180px;
  --reading: 720px;
  --gutter: 32px;        /* margen exterior de las bandas */
  --pad-x: 56px;         /* respiración interior horizontal */
  --pad-y: 96px;         /* respiración interior vertical */
  --radius-pill: 999px;
}

/* --- 2. Reset y base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background: var(--offwhite);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* Foco visible para navegación por teclado */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- 3. Tipografía y elementos comunes ---------------------------------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  margin: 0;
}

h1 { font-size: clamp(38px, 4.35vw, 64px); max-width: 720px; }
h2 { font-size: clamp(32px, 4vw, 54px); }
h3 { font-size: 26px; }

p { margin: 0; }

.eyebrow {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 10px 23px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  transition: transform .2s ease, background .2s ease;
}

.button:hover { transform: translateY(-2px); }

.button-primary {
  background: var(--muted);
  color: var(--white);
  border: 1px solid var(--muted);
}

.button-primary:hover { background: var(--charcoal); border-color: var(--charcoal); }

/* --- 4. Cabecera -------------------------------------------------------
   Si en IONOS la cabecera y el menú los pone la plantilla, borra este
   bloque <header> del HTML y estas reglas: no hacen nada más.          */
.site-header {
  width: min(var(--max), calc(100% - (var(--gutter) * 2)));
  margin: 0 auto;
  padding: 26px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--offwhite);
}

.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1;
}

.brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
}

.brand-role {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}

.main-nav {
  display: flex;
  gap: 34px;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
}

.main-nav a { position: relative; padding: 8px 0; }

.main-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
}

/* --- 5. Layout de secciones --------------------------------------------
   Cada sección es una banda de color centrada, con el mismo ancho y la
   misma respiración interior. Añadir una sección nueva = <section class="section">
   + una línea de background.                                          */
.section {
  width: min(var(--max), calc(100% - (var(--gutter) * 2)));
  margin: 24px auto;
  padding: var(--pad-y) var(--pad-x);
}

.hero       { background: var(--cream); }
.work       { background: var(--cream-deep); }
.services   { background: var(--rose); }
.modalities { background: var(--cream); }
.reviews    { background: var(--cream-deep); }
.final-cta  { background: var(--rose); }

.section-heading {
  max-width: var(--reading);
  margin-bottom: 55px;
}

.section-heading > p:last-child {
  margin-top: 24px;
  color: var(--muted);
  max-width: 680px;
}

/* --- 6. Hero ------------------------------------------------------------ */
.hero {
  padding-top: 72px;
  padding-bottom: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: 64px;
  align-items: center;
}

.hero-copy { min-width: 0; }

.hero-lead {
  max-width: 650px;
  margin: 30px 0 34px;
  font-size: 21px;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.hero-art {
  min-width: 0;
  display: flex;
  justify-content: center;
}

.hero-image {
  width: 100%;
  max-width: 430px;
  border: 1px solid var(--rose);
  padding: 8px;
  background: var(--card-bg);
}

.hero-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

/* --- 7. Forma de trabajar ---------------------------------------------- */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 70px 100px;
}

.principle {
  border-top: 1px solid var(--line);
  padding-top: 25px;
}

.principle-inner {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 22px;
  align-items: start;
}

.principle-art {
  width: 78px;
  height: 78px;
  border: 1px solid var(--rose);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.principle-art svg {
  width: 100%;
  height: 100%;
  display: block;
}

.principle h3 { margin-bottom: 13px; }

/* --- 8. Servicios ------------------------------------------------------ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.service-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 230px;
  padding: 9px;
  border: 3px solid rgba(118, 102, 103, .32);
}

.service-card h3 {
  margin: 0;
  padding: 17px 16px;
  border: 1px solid rgba(52, 50, 52, .18);
  background: rgba(250, 247, 242, .32);
  text-align: center;
  font-size: 24px;
  line-height: 1.2;
}

.service-card p {
  margin: 9px 0 0;
  padding: 17px 18px;
  border: 1px solid rgba(52, 50, 52, .18);
  background: rgba(250, 247, 242, .18);
  line-height: 1.55;
}

/* Tarjeta ancha (asesoramiento preventivo): ocupa las tres columnas */
.service-card-wide {
  grid-column: 1 / -1;
  min-height: 0;
  grid-template-rows: auto auto;
}

.service-card-wide p { text-align: center; }

.services-more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* --- 9. Modalidades ---------------------------------------------------- */
.modalities-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px;
}

.modality { display: block; transition: transform .2s ease; }
.modality:hover { transform: translateY(-3px); }

.modality-art {
  height: 132px;
  border: 1px solid var(--rose);
  background: rgba(250, 247, 242, .55);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.modality-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.modality h3 { margin-bottom: 7px; }
.modality p { color: var(--muted); line-height: 1.45; }

/* --- 10. Reseñas (widget de Google vía Elfsight) ------------------------- */
.reviews-widget {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  min-height: 220px;
}

/* --- 11. CTA final ----------------------------------------------------- */
.final-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 28px;
}

.final-cta > div { max-width: 760px; }

.final-cta p:not(.eyebrow) {
  color: var(--muted);
  margin-top: 18px;
}

/* --- 12. Barra flotante de contacto ------------------------------------ */
.contact-rail {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--offwhite);
  border: 1px solid var(--line);
  border-left: 0;
}

.contact-rail a {
  width: 46px;
  height: 50px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line);
  font-size: 20px;
}

.contact-rail a:last-child { border-bottom: 0; }
.contact-rail svg { width: 24px; height: 24px; display: block; }

/* --- 13. Pie ----------------------------------------------------------
   Igual que la cabecera: si IONOS ya pone el pie, borra el <footer>.  */
.site-footer {
  width: min(var(--max), calc(100% - (var(--gutter) * 2)));
  margin: 40px auto 0;
  padding: 22px 0 40px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-size: 14px;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* --- 14. Animaciones --------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy,
  .hero-art,
  .section-heading,
  .principle,
  .service-card,
  .modality,
  .final-cta {
    animation: rise .65s ease both;
  }

  .hero-art { animation-delay: .08s; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* --- 15. Responsive de la portada -------------------------------------- */

/* Tablet y móvil grande */
@media (max-width: 900px) {
  :root {
    --gutter: 19px;
    --pad-x: 28px;
    --pad-y: 64px;
  }

  .main-nav { gap: 18px; font-size: 15px; }

  .hero {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .hero h1 { font-size: clamp(34px, 6vw, 48px); max-width: none; }
  .hero-image { max-width: 360px; }

  /* Los cuatro principios siguen en 2 × 2, más compactos */
  .principles-grid { gap: 42px 24px; }
  .principle-inner { grid-template-columns: 52px 1fr; gap: 14px; }
  .principle-art { width: 52px; height: 52px; padding: 6px; }
  .principle h3 { font-size: 21px; }
  .principle p { font-size: 15px; line-height: 1.5; }

  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modalities-grid { grid-template-columns: 1fr; gap: 28px; }
  .section-heading { margin-bottom: 40px; }
}

/* Móvil */
@media (max-width: 620px) {
  body { font-size: 17px; }

  :root { --pad-x: 22px; --pad-y: 52px; }

  .site-header {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
  }

  .main-nav { gap: 14px; font-size: 14px; flex-wrap: wrap; justify-content: center; }
  .brand-name { font-size: 24px; }

  .hero h1 { font-size: 34px; }
  h2 { font-size: 30px; }
  h3 { font-size: 22px; }

  .principles-grid { grid-template-columns: 1fr; gap: 32px; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card, .service-card-wide { grid-column: auto; min-height: 0; }
  .service-card h3 { font-size: 21px; }

  /* La barra de contacto pasa a ser una barra inferior */
  .contact-rail {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: none;
    flex-direction: row;
    justify-content: center;
    border: 1px solid var(--line);
    border-bottom: 0;
  }

  .contact-rail a {
    flex: 1;
    max-width: 90px;
    height: 54px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .contact-rail a:last-child { border-right: 0; }

  /* Espacio para que la barra inferior no tape el final de la página */
  .site-footer { padding-bottom: 90px; flex-direction: column; align-items: flex-start; }
  .footer-legal { gap: 8px 18px; }
}


/* ==========================================================================
   16. PÁGINAS INTERIORES
   Usado por servicios.html (y reutilizable en contacto.html).
   ========================================================================== */

/* --- Cabecera de página interior ---------------------------------------- */
.page-hero {
  background: var(--cream);
}

.page-hero h1 {
  margin-bottom: 20px;
}

.page-hero-lead {
  max-width: 790px;
  font-size: 18px;
  line-height: 1.7;
}

/* --- Áreas de práctica -------------------------------------------------
   Las secciones van una tras otra sobre un fondo continuo, separadas por
   una línea fina, en lugar de como bandas independientes. Por eso .details
   lleva el fondo y .detail solo el borde superior.                      */
.details {
  width: min(var(--max), calc(100% - (var(--gutter) * 2)));
  margin: 24px auto;
  background: var(--sand);
}

.detail {
  padding: var(--pad-y) var(--pad-x);
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: 24px;
}

.detail:first-child {
  border-top: 0;
}

/* align-items:start alinea la imagen con el arranque del texto. Con center
   la imagen quedaba flotando a media altura, porque las listas hacen que la
   columna de texto sea bastante más alta que la ilustración. */
.detail-inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 68px;
  align-items: start;
}

/* Alterna el lado de la imagen. Al basarse en nth-child, añadir o quitar
   un área recalcula el orden solo: no hay que tocar nada más. */
.detail:nth-child(even) .detail-art  { order: 2; }
.detail:nth-child(even) .detail-copy { order: 1; }

.detail-art {
  padding: 11px;
  border: 1px solid var(--line-soft);
  background: var(--card-bg);
}

/* Sin recorte: se ve la ilustración completa.
   OJO si alguien vuelve a poner aspect-ratio 4/3 aquí: las ilustraciones son
   3:2 (más anchas), así que un 4/3 con object-fit:cover les corta LOS LADOS.
   En «Derecho de Familia» eso hacía desaparecer dos de las tres casas. */
.detail-art img {
  display: block;
  width: 100%;
  height: auto;
}

.detail-num {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.detail-copy h2 {
  margin-bottom: 18px;
  font-size: clamp(29px, 4vw, 42px);
  line-height: 1.15;
}

.detail-copy > p {
  margin-bottom: 17px;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.7;
}

.detail-list {
  list-style: none;
  margin: 25px 0 0;
  padding: 0;
}

.detail-list li {
  position: relative;
  padding: 9px 0 9px 22px;
  border-bottom: 1px solid rgba(56, 54, 56, .09);
  font-size: 16px;
  line-height: 1.65;
}

.detail-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--muted);
}

.back-link {
  display: inline-block;
  margin-top: 25px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--rose);
}

/* --- Variante oscura del CTA final ------------------------------------- */
.final-cta.is-dark {
  background: var(--muted);
  color: var(--offwhite);
}

.final-cta.is-dark .eyebrow,
.final-cta.is-dark p:not(.eyebrow) {
  color: var(--offwhite);
}

.button-light {
  background: var(--offwhite);
  color: var(--muted);
  border: 1px solid var(--offwhite);
}

.button-light:hover {
  background: transparent;
  color: var(--offwhite);
}


/* --- 17. Responsive de las páginas interiores -------------------------- */
@media (max-width: 900px) {
  .detail-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }

  /* En una sola columna, la imagen siempre va arriba */
  .detail:nth-child(even) .detail-art,
  .detail:nth-child(even) .detail-copy {
    order: initial;
  }
}

@media (max-width: 620px) {
  .page-hero-lead { font-size: 17px; }
  .detail-copy h2 { font-size: 27px; }
  .detail-copy > p { font-size: 16px; }
  .detail-list li { font-size: 15px; }
}


/* ==========================================================================
   18. BLOG
   ========================================================================== */

.blog-intro {
  background: var(--cream);
  text-align: center;
}

.blog-intro h1 {
  margin: 0 auto 24px;
  max-width: none;
}

/* Portada. La ilustración es 2:1 y muy horizontal, así que se limita el
   ancho para que no domine la página entera. */
.blog-cover {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 8px;
  border: 1px solid var(--rose);
  background: var(--card-bg);
}

.blog-cover img {
  display: block;
  width: 100%;
  height: auto;
}

/* El titular va centrado, pero los párrafos alineados a la izquierda:
   un texto largo centrado es incómodo de leer. */
.blog-intro-copy {
  max-width: 860px;
  margin: 30px auto 0;
  text-align: left;
}

.blog-intro-copy p {
  margin-bottom: 14px;
}

.blog-intro-copy p:last-child {
  margin-bottom: 0;
}

.blog-intro-closing {
  font-weight: 500;
}

/* --- Listado de artículos ---------------------------------------------
   Todavía sin usar: no hay artículos publicados. Preparado para cuando los
   haya, para no tener que rediseñar entonces. Cada artículo sería:

   <article class="post">
     <h2><a href="articulo-x.html">Titular</a></h2>
     <p class="post-date">12 de marzo de 2026</p>
     <p>Entradilla de dos o tres líneas.</p>
   </article>                                                          */
.post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 42px;
}

.post {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.post h2 {
  margin-bottom: 8px;
  font-size: 26px;
}

.post-date {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.post p:last-child {
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .post-grid { grid-template-columns: 1fr; gap: 32px; }
}


/* ==========================================================================
   19. CONTACTO
   ========================================================================== */

/* Aviso destacado del hero */
.notice {
  margin-top: 24px;
  padding: 16px 18px;
  border-left: 3px solid var(--muted);
  background: rgba(255, 255, 255, .3);
  font-weight: 600;
}

/* --- Modalidades -------------------------------------------------------- */
.modalities {
  background: var(--cream-deep);
}

.section-heading.is-centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.mod-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.mod-card {
  padding: 24px 10px 10px;
  border-top: 1px solid var(--line);
  text-align: center;
}

/* OJO: flex, NO grid con place-items.
   Con `display: grid; place-items: center` el `max-height: 100%` de la imagen
   de abajo NO se resolvia: el navegador no lo aplicaba contra el area de la
   rejilla. Las ilustraciones se renderizaban a su tamano natural y el
   `overflow: hidden` de aqui las recortaba en silencio por arriba y por abajo.
   Se veia sobre todo en «Telefonica», la mas cuadrada de las tres (480x440):
   se dibujaba a 177x162 px dentro de una zona util de 178x106, o sea que se
   comia los dos extremos del auricular y parecia una ilustracion mal hecha.
   Con flex el porcentaje resuelve y las tres caben enteras.
   La seccion 9 (modalidades de la portada) ya usaba flex, y por eso alli las
   mismas tres imagenes se veian bien. */
.mod-icon {
  width: 190px;
  height: 120px;
  margin: 0 auto 17px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--offwhite);
  overflow: hidden;
}

.mod-icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.mod-card h3 { margin-bottom: 9px; font-size: 22px; }
.mod-card p  { margin: 0; color: var(--muted); font-size: 15px; }

.common-note {
  max-width: 840px;
  margin: 34px auto 0;
  padding: 18px 22px;
  background: var(--rose);
  text-align: center;
}

/* --- Formulario y columna lateral --------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr);
  gap: 52px;
  align-items: start;
}

.form-card { min-width: 0; }

.form-card h2,
.side h2 { margin-bottom: 10px; font-size: 30px; }

.required-note {
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 13px;
}

.form-warning {
  margin-bottom: 28px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  background: rgba(255, 255, 255, .5);
  font-size: 14px;
  line-height: 1.55;
}

.form-warning strong { color: var(--muted); }

fieldset {
  margin-bottom: 34px;
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: 16px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.3;
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

label,
.field-label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(255, 255, 255, .6);
  color: var(--charcoal);
  font: inherit;
}

textarea { min-height: 150px; resize: vertical; }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Un borde de foco visible tambien para quien navega con el teclado */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.helper  { margin-top: 6px; font-size: 12px; color: var(--muted); }
.counter { margin-top: 5px; font-size: 12px; color: var(--muted); text-align: right; }

.field-spaced { margin-top: 18px; }

/* Opciones en forma de pastilla */
.choice-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.choice input { width: auto; margin: 0; }
.choice-stacked { margin-top: 8px; }

.deadline-box {
  padding: 22px;
  border: 1px solid var(--line);
  background: rgba(220, 203, 199, .22);
}

.privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 20px;
  font-size: 14px;
  font-weight: 400;
}

.privacy input { width: auto; margin-top: 4px; }
.privacy a { text-decoration: underline; }

.submit {
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 15px;
}

/* Trampa antispam: invisible, pero sin display:none, porque algunos robots
   ignoran los campos ocultos de esa forma. */
.hidden-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Columna lateral ---------------------------------------------------- */
.side-box {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.side-box:first-of-type { margin-top: 20px; }

.side-label {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.side-value { font-size: 16px; }

.side-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.pill {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .4);
  font-size: 13px;
}

.pill:hover { background: var(--offwhite); }

/* --- Mapa bajo demanda --------------------------------------------------
   Mientras no se pulsa, se ve el recuadro con degradado; al pulsar, se
   sustituye por el iframe de Google. */
.map {
  aspect-ratio: 4 / 3;
  margin-top: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(220, 203, 199, .45), rgba(166, 163, 167, .2));
}

.map-load {
  display: grid;
  place-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 24px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.map-load strong {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--charcoal);
}

.map-load span { font-size: 13px; }
.map-load:hover strong { color: var(--accent); }

.map.is-loaded { background: none; }

.map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: 0;
}


/* --- 20. Responsive de contacto ----------------------------------------- */
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: 44px; }
  .mod-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .grid2 { grid-template-columns: 1fr; }
  .form-card h2, .side h2 { font-size: 26px; }
  .deadline-box { padding: 18px; }
}


/* ==========================================================================
   21. PÁGINAS LEGALES (privacidad, aviso legal, cookies)
   ========================================================================== */

.legal-body {
  max-width: var(--reading);
}

.legal-body h2 {
  margin: 40px 0 14px;
  font-size: 24px;
}

.legal-body h2:first-child { margin-top: 0; }

.legal-body p,
.legal-body li {
  margin-bottom: 12px;
  color: var(--muted);
}

.legal-body ul {
  margin: 0 0 18px 20px;
  padding: 0;
}

.legal-body a { text-decoration: underline; }

/* Avisos de "esto todavia no esta redactado". Se ven a proposito: si alguien
   publica la pagina sin terminarla, se nota. */
.draft-notice {
  margin-bottom: 34px;
  padding: 16px 18px;
  border-left: 4px solid var(--accent);
  background: rgba(255, 255, 255, .5);
}

.pending {
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: rgba(255, 255, 255, .45);
  font-size: 15px;
  font-style: italic;
}