/* =========================================================================
   Clínica Dental NM — base.css
   Tokens, reset, tipografía global, header y footer.
   Valores extraídos del CSS de producción (Elementor). Ver DESIGN.md.
   PROPIEDAD: agente de referencia. Las plantillas usan public/styles/<tpl>.css.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Paleta de marca (post-6.css, .elementor-kit-6) */
  --nm-taupe: #9b9384; /* c1f9824 */
  --nm-beige: #cdc3b3; /* 2b0c785 */
  --nm-beige-15: rgba(205, 195, 179, 0.15); /* 243972b = #CDC3B326 */
  --nm-teal: #008c85; /* cb1909f */
  --nm-aqua: #c6e4e2; /* 11fb0f4 */
  --nm-sage: #7fb59b; /* 002733a */
  --nm-plum: #400721; /* 9a336e7 */
  --nm-ink: #0f0f0f; /* a521da6 */
  --nm-white: #ffffff; /* 6719db9 */
  --nm-offwhite: #f8f8f8; /* d2eb808 */
  --nm-muted: #7a7a7a;

  --nm-link: var(--nm-teal);

  /* Tipografía */
  --nm-font-body: "Karla", "Helvetica Neue", Arial, sans-serif;
  --nm-font-ui: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --nm-fs-xs: 13px;
  --nm-fs-sm: 14px;
  --nm-fs-base: 15px;
  --nm-fs-md: 16px;
  --nm-fs-lg: 17px;
  --nm-fs-xl: 18px;
  --nm-fs-h3: 32px;
  --nm-fs-h2: 38px;
  --nm-fs-h1: 46px;
  --nm-fs-display: 50px;

  --nm-lh-body: 1.6;
  --nm-lh-tight: 1.15;
  --nm-ls-btn: 1.2px;
  --nm-ls-caps: 1.3px;

  /* Layout */
  --nm-container: 1140px;
  --nm-container-wide: 1300px;
  --nm-gutter: 20px;

  --nm-space-1: 8px;
  --nm-space-2: 10px;
  --nm-space-3: 20px;
  --nm-space-4: 25px;
  --nm-space-5: 30px;
  --nm-space-6: 50px;

  /* Forma */
  --nm-radius: 12px;
  --nm-radius-sm: 10px;
  --nm-shadow: none; /* el original no usa ninguna sombra */
  --nm-transition: 0.3s;
}

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

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

body {
  margin: 0;
  background: var(--nm-white);
  color: var(--nm-ink);
  font-family: var(--nm-font-body);
  font-size: var(--nm-fs-md);
  font-weight: 400;
  line-height: var(--nm-lh-body);
  -webkit-font-smoothing: antialiased;
}

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

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

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

/* ---------- 3. Tipografía global ---------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--nm-font-ui);
  line-height: var(--nm-lh-tight);
  color: var(--nm-ink);
  margin: 0 0 var(--nm-space-3);
  font-weight: 600;
}
h1 {
  font-size: var(--nm-fs-h1);
}
h2 {
  font-size: var(--nm-fs-h2);
  font-weight: 200;
}
h3 {
  font-size: var(--nm-fs-h3);
}
h4 {
  font-size: var(--nm-fs-xl);
}
h5 {
  font-size: var(--nm-fs-lg);
}
h6 {
  font-size: var(--nm-fs-base);
}

p,
ul,
ol,
blockquote,
table,
figure {
  margin: 0 0 var(--nm-space-3);
}

a {
  color: var(--nm-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover {
  text-decoration: none;
}

small,
.meta {
  font-size: var(--nm-fs-sm);
  color: var(--nm-muted);
}

@media (max-width: 767px) {
  :root {
    --nm-fs-h1: 32px;
    --nm-fs-h2: 28px;
    --nm-fs-h3: 24px;
    --nm-fs-display: 34px;
  }
}

/* ---------- 4. Utilidades de layout ------------------------------------- */
.container {
  width: 100%;
  max-width: var(--nm-container);
  margin-inline: auto;
  padding-inline: var(--nm-space-3);
}
.container--wide {
  max-width: var(--nm-container-wide);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: var(--nm-space-2);
  top: var(--nm-space-2);
  z-index: 10000;
  background: var(--nm-white);
  color: var(--nm-ink);
  padding: var(--nm-space-2) var(--nm-space-3);
  border-radius: var(--nm-radius-sm);
}

main {
  display: block;
}

/* ---------- 5. Botones --------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--nm-font-ui);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition:
    background var(--nm-transition),
    border var(--nm-transition),
    border-radius var(--nm-transition),
    color var(--nm-transition);
}

/* Header — .elementor-element-8a2ac17 .elementor-button */
.btn--primary {
  background: var(--nm-taupe);
  color: var(--nm-white);
  font-size: var(--nm-fs-sm);
  font-weight: 300;
  letter-spacing: var(--nm-ls-btn);
  border-radius: var(--nm-radius-sm);
  padding: 18px var(--nm-space-3);
  width: 100%;
}
.btn--primary:hover {
  background: var(--nm-beige);
}

/* Footer — .elementor-element-e61790c .elementor-button */
.btn--cta {
  background: var(--nm-beige);
  color: var(--nm-white);
  border: 1px solid var(--nm-taupe);
  border-radius: var(--nm-radius);
  font-size: var(--nm-fs-base);
  font-weight: 600;
  letter-spacing: var(--nm-ls-caps);
  padding: var(--nm-space-3);
}
.btn--cta:hover {
  background: var(--nm-taupe);
  border-color: var(--nm-white);
}

@media (max-width: 1024px) {
  .btn--primary {
    padding-block: 13px;
  }
}

/* =========================================================================
   6. HEADER — calcado de post-7.css
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--nm-white);
}

/* 6.1 Barra superior (b7de338) — oculta en móvil en el original */
.topbar {
  background: var(--nm-beige-15);
  padding: var(--nm-space-1) var(--nm-space-2);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nm-space-3);
}
.topbar-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 32px; /* --e-icon-list gap del widget e41abc3 */
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-base);
  font-weight: 400;
}
.topbar-contact a {
  color: var(--nm-taupe);
  text-decoration: none;
  transition: color var(--nm-transition);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.topbar-contact a:hover {
  color: var(--nm-beige);
}
.topbar-contact svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.topbar-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 7px; /* --grid-column-gap:7px */
}
.topbar-social a {
  display: grid;
  place-items: center;
  width: calc(18px + 0.6em); /* --icon-size:18px + --icon-padding:.3em */
  height: calc(18px + 0.6em);
  border-radius: 50%;
  background: var(--nm-taupe);
  color: var(--nm-white);
  transition:
    background var(--nm-transition),
    color var(--nm-transition);
}
.topbar-social a:hover {
  background: var(--nm-beige);
}
.topbar-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

@media (max-width: 767px) {
  .topbar {
    display: none;
  } /* elementor-hidden-mobile */
}

/* 6.2 Barra principal (f5219c8) */
.mainbar {
  background: var(--nm-white);
  padding: var(--nm-space-1) var(--nm-space-2);
}
.mainbar-inner {
  display: flex;
  align-items: center;
  gap: var(--nm-space-3);
}

.brand {
  flex: 0 0 auto;
  width: 23%;
  max-width: 290px;
  text-decoration: none;
}
.brand img {
  width: 100%;
  height: auto;
}
.brand-text {
  font-family: var(--nm-font-ui);
  font-weight: 600;
  color: var(--nm-taupe);
}

/* 6.3 Navegación (fc11e8d) */
.nav-details {
  flex: 1 1 auto;
  min-width: 0;
}
.nav-details > summary {
  display: none;
  list-style: none;
  cursor: pointer;
  color: var(--nm-taupe);
  padding: var(--nm-space-2);
  border-radius: var(--nm-radius-sm);
  margin-left: auto;
  width: max-content;
}
.nav-details > summary::-webkit-details-marker {
  display: none;
}
.nav-details > summary:hover {
  background: var(--nm-beige);
  color: var(--nm-white);
}
.nav-details > summary svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.site-nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.site-nav > ul > li {
  position: relative;
  margin-inline: 26.5px;
} /* 53px / 2 */

.site-nav a {
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-base);
  font-weight: 400;
  color: var(--nm-taupe);
  text-decoration: none;
  display: block;
  padding-block: var(--nm-space-2);
  transition: color var(--nm-transition);
}
.site-nav a[aria-current="page"] {
  color: var(--nm-beige);
  font-weight: 700;
}

/* Primer nivel en mayúsculas, como producción (los labels van en caja normal). */
.site-nav > ul > li > a {
  text-transform: uppercase;
}

/* Caret ▾ junto a los ítems con submenú y al idioma actual (color heredado). */
.nav-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: 1px;
}

/* Desplegable de Serveis */
.nav-sub {
  list-style: none;
  margin: 9px 0 0; /* margin-top:9px !important */
  padding: 0;
  background: var(--nm-taupe);
  border-radius: var(--nm-radius-sm);
  min-width: 260px;
}
.nav-sub a {
  color: var(--nm-white);
  padding: var(--nm-space-2) 11px; /* padding-inline:11px */
  transition:
    background var(--nm-transition),
    color var(--nm-transition);
}
.nav-sub li:first-child a {
  border-radius: var(--nm-radius-sm) var(--nm-radius-sm) 0 0;
}
.nav-sub li:last-child a {
  border-radius: 0 0 var(--nm-radius-sm) var(--nm-radius-sm);
}
.nav-sub a:hover {
  background: var(--nm-beige);
  color: var(--nm-white);
}
.nav-sub a[aria-current="page"] {
  background: var(--nm-white);
  color: var(--nm-beige);
}

@media (min-width: 1025px) {
  .has-sub > .nav-sub {
    position: absolute;
    top: calc(100% + 9px); /* separación visual sin margen… */
    margin-top: 0;
    left: 0;
    z-index: 20;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--nm-transition);
  }
  /* …y puente invisible sobre esos 9px: el hover no se corta al cruzar
     del enlace "Serveis" al panel (antes el margen dejaba un hueco que
     cerraba el desplegable a mitad de camino). */
  .has-sub > .nav-sub::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 0;
    right: 0;
    height: 9px;
  }
  .has-sub:hover > .nav-sub,
  .has-sub:focus-within > .nav-sub {
    visibility: visible;
    opacity: 1;
  }
}

/* 6.4 Selector de idioma: bandera + "Ca"/"Es" + caret, como producción.
   El otro idioma vive en .lang-menu: desplegable al hover/focus en escritorio
   (mismo patrón que .nav-sub, con puente de 9px) y en línea dentro del panel
   en móvil. */
.lang-switcher {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--nm-space-1);
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-sm);
  color: var(--nm-taupe);
}
.lang-switcher a {
  color: var(--nm-taupe);
  text-decoration: none;
}
.lang-switcher a:hover {
  color: var(--nm-beige);
}
.lang-current,
.lang-menu a,
.lang-menu .lang-unavailable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lang-current {
  font-weight: 700;
  color: var(--nm-beige);
}
.lang-unavailable {
  color: var(--nm-beige);
  opacity: 0.55;
}
.lang-flag {
  flex: 0 0 auto;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 15, 15, 0.08);
}
.lang-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--nm-space-1);
}
@media (min-width: 1025px) {
  .lang-menu {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 20;
    display: block;
    background: var(--nm-taupe);
    border-radius: var(--nm-radius-sm);
    min-width: 74px;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--nm-transition);
  }
  /* Puente invisible sobre el hueco de 9px, como en .nav-sub. */
  .lang-menu::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 0;
    right: 0;
    height: 9px;
  }
  .lang-switcher:hover .lang-menu,
  .lang-switcher:focus-within .lang-menu {
    visibility: visible;
    opacity: 1;
  }
  .lang-menu a,
  .lang-menu .lang-unavailable {
    display: flex;
    padding: 8px 11px;
    color: var(--nm-white);
    border-radius: var(--nm-radius-sm);
    transition:
      background var(--nm-transition),
      color var(--nm-transition);
  }
  .lang-menu a:hover {
    background: var(--nm-beige);
    color: var(--nm-white);
  }
  .lang-menu .lang-unavailable {
    color: var(--nm-white);
  }
}

.header-cta {
  flex: 0 0 auto;
  width: 15.569%;
  min-width: 130px;
}

/* Teléfono de la barra móvil (auditoría A4b). Por encima de 767px el número ya
   se ve en .topbar, así que aquí NO se pinta: el enlace nunca sale duplicado y
   el header de escritorio queda exactamente igual que antes. */
.hdr-tel {
  display: none;
}
@media (max-width: 767px) {
  /* Mismo objetivo táctil y misma caja que la hamburguesa (44×44). */
  .hdr-tel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--nm-white);
    color: var(--nm-taupe);
    border: 1px solid var(--nm-beige-15);
    border-radius: var(--nm-radius-sm);
    text-decoration: none;
  }
  .hdr-tel svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }
  /* El número solo cabe junto al logo y al pill "Contacte" a partir de ~480px;
     por debajo queda el icono, que sigue siendo un enlace tel: de 44×44. */
  .hdr-tel-num {
    display: none;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .hdr-tel {
    width: auto;
    padding-inline: 12px;
  }
  .hdr-tel-num {
    display: inline;
    font-family: var(--nm-font-ui);
    font-size: var(--nm-fs-sm);
    white-space: nowrap;
  }
}

/* En escritorio el panel es transparente al layout (el <nav> participa del
   flex como siempre) y los extras del menú móvil no se pintan. El DOM lleva
   el CTA antes del menú (para el orden móvil); aquí se recoloca al final. */
.nav-panel {
  display: contents;
}
.nav-extras {
  display: none;
}
@media (min-width: 1025px) {
  .header-cta {
    order: 3;
  }
  /* El <details> va SIN "open" en el HTML (móvil: cerrado por defecto).
     En escritorio el contenido debe verse siempre: en navegadores modernos
     lo destapa esta regla sobre ::details-content (anula el
     content-visibility:hidden del UA); en los antiguos lo hace el script
     inline del Layout, que pone open=true por encima de 1024px. */
  .nav-details::details-content {
    display: contents;
    content-visibility: visible;
  }
}

/* 6.5 Móvil / tablet — Opción B: barra única de 64px con pill Contacte (44px)
   + hamburguesa; idiomas, teléfono y CTA grande dentro del panel del menú. */
@media (max-width: 1024px) {
  .mainbar {
    position: relative;
  }
  .mainbar-inner {
    flex-wrap: nowrap;
    gap: var(--nm-space-1);
  }
  /* Disposición móvil: hamburguesa al extremo izquierdo (order:-1) y logo
     centrado entre ella y el pill Contacte (margin-inline:auto). El DOM no
     cambia: en escritorio se mantiene el orden de siempre. */
  .brand {
    flex: 0 1 auto;
    width: auto;
    max-width: 190px;
    margin-inline: auto;
  }

  /* La barra no muestra el selector de idioma: vive en el menú. */
  .mainbar-inner > .lang-switcher {
    display: none;
  }

  /* Pill Contacte: compacto pero con 44px de alto (target táctil). */
  .header-cta {
    width: auto;
    min-width: 0;
  }
  .header-cta .btn--primary {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 44px;
    padding: 0 14px;
    font-size: 12px;
  }

  /* Hamburguesa: 44x44, primera de la barra. Fondo blanco con rayas taupe
     (sin inversión, tampoco en :hover, que en táctil se queda "pegado");
     borde sutil para que no se pierda sobre la barra blanca. */
  .nav-details {
    flex: 0 0 auto;
    width: auto;
    order: -1;
  }
  .nav-details > summary,
  .nav-details > summary:hover {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    background: var(--nm-white);
    color: var(--nm-taupe);
    border: 1px solid var(--nm-beige-15);
  }

  /* El menú abierto es un panel superpuesto bajo la barra, no una fila más:
     la cabecera se queda en ~64px pase lo que pase. */
  /* Cinturón y tirantes: el panel SOLO existe con el details abierto, aunque
     algún motor pintara el contenido de un details cerrado. */
  .nav-details:not([open]) .nav-panel {
    display: none;
  }
  .nav-panel {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--nm-white);
    border-top: 1px solid var(--nm-beige-15);
    box-shadow: 0 14px 30px rgba(15, 15, 15, 0.12);
    padding: var(--nm-space-1) var(--nm-space-3) var(--nm-space-4);
    max-height: calc(100vh - 120px);
    overflow: auto;
  }
  .site-nav > ul {
    flex-direction: column;
    align-items: stretch;
  }
  .site-nav > ul > li {
    margin: 0;
    border-top: 1px solid var(--nm-beige-15);
  }
  .site-nav a {
    padding-block: 12px;
  }
  .nav-sub {
    margin: 0 0 var(--nm-space-2);
  }

  /* Idiomas + teléfono + CTA grande, como remate del menú. */
  .nav-extras {
    display: flex;
    flex-direction: column;
    gap: var(--nm-space-2);
    padding-top: var(--nm-space-3);
    border-top: 1px solid var(--nm-beige-15);
  }
  .nav-extras .lang-switcher {
    justify-content: center;
  }
  /* En el panel móvil el idioma va todo en línea: sin caret de desplegable. */
  .nav-extras .lang-current .nav-caret {
    display: none;
  }
  .nav-extras-tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nm-space-1);
    min-height: 44px;
    font-family: var(--nm-font-ui);
    font-size: var(--nm-fs-base);
    color: var(--nm-taupe);
    text-decoration: none;
    border: 1px solid var(--nm-beige);
    border-radius: var(--nm-radius-sm);
  }
  .nav-extras-tel svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
  }
  .nav-extras-cta {
    text-align: center;
  }
}

/* Por debajo de 400px la barra reparte cuatro piezas (hamburguesa, logo,
   teléfono y pill de contacto): el pill se estrecha un punto para que el logo
   no se quede en nada. Nada de esto llega a tablet ni a escritorio. */
@media (max-width: 400px) {
  .header-cta .btn--primary {
    padding-inline: 10px;
    font-size: 11px;
    letter-spacing: 0.6px;
  }
}

/* =========================================================================
   7. FOOTER — calcado de post-10.css
   ========================================================================= */
.site-footer {
  font-family: var(--nm-font-ui);
}

/* 7.1 Banda de llamada (c220c81) */
.footer-cta {
  background: var(--nm-beige-15);
  padding: var(--nm-space-6) var(--nm-space-3);
  text-align: center;
}
/* Con el formulario al lado (todas las páginas salvo contacte): texto a la
   izquierda, formulario a la derecha, como la franja del original. */
.footer-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--nm-space-5);
  align-items: start;
  text-align: left;
}
.footer-cta-inner .footer-cta-text h2,
.footer-cta-inner .footer-cta-text p {
  text-align: left;
}
/* Los campos van sobre el beige de la banda: fondo blanco para que se vean. */
.footer-cta .ct-input {
  background: var(--nm-white);
}
@media (max-width: 900px) {
  .footer-cta-inner {
    grid-template-columns: 1fr;
  }
}
.footer-cta h2 {
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-display);
  font-weight: 600;
  color: var(--nm-taupe);
  margin: 0 0 var(--nm-space-4);
}
.footer-cta p {
  font-size: var(--nm-fs-md);
  font-weight: 400;
  color: var(--nm-taupe);
  max-width: 60ch;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .footer-cta p {
    text-align: justify;
  }
}

/* 7.2 Banda principal (330c357) */
.footer-main {
  background: var(--nm-taupe);
  color: var(--nm-white);
  padding: var(--nm-space-5) var(--nm-space-3) var(--nm-space-2);
}
.footer-logo {
  max-width: 40%;
  margin: 0 auto var(--nm-space-3);
}
.footer-logo img {
  width: 100%;
}

.footer-cols {
  margin-top: var(--nm-space-4);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--nm-space-5) var(--nm-gutter);
  align-items: start;
}
.footer-col h2 {
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-md);
  font-weight: 700;
  letter-spacing: var(--nm-ls-caps);
  color: var(--nm-white);
  text-transform: uppercase;
  margin: 0 0 var(--nm-space-2);
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--nm-fs-sm);
  font-weight: 400;
}
.footer-col li + li {
  margin-top: 5px;
}
.footer-col a,
.footer-col address {
  color: var(--nm-white);
  text-decoration: none;
  font-style: normal;
  transition: color var(--nm-transition);
}
.footer-col a:hover {
  color: var(--nm-beige);
  text-decoration: underline;
}
/* «Configurar cookies»: es un botón (acción, no navegación) con aspecto de
   enlace del pie. */
.footer-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--nm-white);
  cursor: pointer;
  transition: color var(--nm-transition);
}
.footer-link:hover,
.footer-link:focus-visible {
  color: var(--nm-beige);
  text-decoration: underline;
}

/* Horario (auditoría A4a): dentro de la columna CONTACTA, bajo el email.
   El dato sale de data/clinic.yml; si no está confirmado no se pinta nada. */
.footer-hours {
  margin-top: var(--nm-space-2);
}
.footer-hours-label {
  display: block;
  font-size: var(--nm-fs-xs);
  font-weight: 700;
  letter-spacing: var(--nm-ls-caps);
  text-transform: uppercase;
  color: var(--nm-white);
}
.footer-hours-row {
  display: block;
  color: var(--nm-white);
}

.footer-legal {
  margin-top: var(--nm-space-6);
  text-align: center;
  font-size: var(--nm-fs-xs);
  font-weight: 400;
  color: var(--nm-white);
}
.footer-legal p {
  margin: 0;
}

@media (max-width: 1024px) {
  .footer-cols {
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
  }
  .footer-legal {
    margin-top: var(--nm-space-4);
  }
}
@media (max-width: 767px) {
  .footer-cols {
    grid-template-columns: 1fr;
  }
  .footer-logo {
    max-width: 34%;
  }
}

/* =========================================================================
   8. Prosa (Markdown) — solo lo que base.css debe garantizar
   ========================================================================= */
.prose {
  font-family: var(--nm-font-body);
}
.prose > *:last-child {
  margin-bottom: 0;
}
.prose img {
  border-radius: var(--nm-radius);
}
.prose blockquote {
  margin-inline: 0;
  padding-inline-start: var(--nm-space-3);
  border-inline-start: 3px solid var(--nm-beige);
  color: var(--nm-taupe);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}
.prose th,
.prose td {
  border: 1px solid var(--nm-beige);
  padding: var(--nm-space-1) var(--nm-space-2);
  text-align: start;
}
.prose pre {
  overflow-x: auto;
  padding: var(--nm-space-2);
  background: var(--nm-offwhite);
  border-radius: var(--nm-radius);
}

.draft-notice {
  max-width: var(--nm-container);
  margin: var(--nm-space-3) auto 0;
  padding: var(--nm-space-2) var(--nm-space-3);
  border: 1px dashed var(--nm-taupe);
  border-radius: var(--nm-radius-sm);
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-sm);
  color: var(--nm-taupe);
}

/* --- Banner de consentimiento (Consent Mode v2; ver Consent en Layout.tsx) --- */
.cookie-banner {
  position: fixed;
  inset-inline: 1rem;
  bottom: 1rem;
  z-index: 90;
  max-width: 640px;
  margin-inline: auto;
  background: var(--nm-white);
  border: 1px solid var(--nm-beige);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(15, 15, 15, 0.18);
  padding: 1rem 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.87rem;
}
.cookie-banner[hidden] {
  display: none;
}
.cookie-banner p {
  margin: 0;
  flex: 1 1 320px;
}
.cookie-banner a {
  color: var(--nm-teal);
}
.cookie-actions {
  display: flex;
  gap: 0.6rem;
}
.cookie-actions button {
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--nm-taupe);
  background: transparent;
  color: var(--nm-taupe);
  cursor: pointer;
}
.cookie-actions .cookie-accept {
  background: var(--nm-taupe);
  color: var(--nm-white);
}
.cookie-actions button:hover {
  opacity: 0.85;
}

/* =========================================================================
   Formulario de contacto (widget fb07647). Vive en base.css porque ademas
   de /contacte se pinta en el footer de TODAS las paginas, como el original.
   ========================================================================= */
/* Las variables van en el propio form: en contact.css estaban en `.ct` (el
   contenedor de la página de contacto) y el formulario del footer, sin ese
   ancestro, perdía márgenes y bordes (campos apelotonados sin separación). */
.ct-form {
  --ct-check-border: #a7a7a7; /* CSS personalizado del widget fb07647 */
  --ct-form-gutter: 10px; /* separación horizontal entre campos */
  --ct-form-row: 30px; /* .elementor-field-group{margin-bottom:30px} */
}
.ct-fields {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--ct-form-gutter) / -2);
  margin-bottom: calc(var(--ct-form-row) * -1);
}
.ct-field {
  flex: 0 0 100%;
  max-width: 100%;
  padding-inline: calc(var(--ct-form-gutter) / 2);
  margin-bottom: var(--ct-form-row);
}

/* Las etiquetas del original son .elementor-screen-only: el texto visible es el
   placeholder. Se conservan para lectores de pantalla. */
.ct-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ct-input {
  width: 100%;
  max-width: 100%;
  display: block;
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-base);
  font-weight: 500;
  line-height: 1.4;
  /* Desviación deliberada del original (beige 2b0c785 sobre beige al 15%: lo
     que se tecleaba era casi invisible). Tinta del sitio para poder leerse. */
  color: var(--nm-ink);
  background: var(--nm-beige-15);
  border: 0; /* border-width:0 0 0 0 en el original */
  border-radius: 3px; /* .elementor-field-textual.elementor-size-sm */
  min-height: 40px;
  padding: 4px 14px;
  transition: background var(--nm-transition);
}
/* El original hereda el color del campo también en el placeholder (beige sobre
   beige al 15 %). Aquí se usa el taupe de la marca: mismo sistema de color, con
   contraste suficiente para leer la única etiqueta visible del campo. */
.ct-input::placeholder {
  color: var(--nm-taupe);
  opacity: 1;
}
/* Autorrelleno del navegador: mantener la tinta legible y el fondo de marca
   (WebKit pinta amarillo por defecto). */
.ct-input:-webkit-autofill {
  -webkit-text-fill-color: var(--nm-ink);
  box-shadow: inset 0 0 0 100px var(--nm-beige-15);
}
.ct-textarea {
  min-height: 120px; /* rows=4 */
  padding-block: 10px;
  resize: vertical;
}

/* --- Checkboxes de aceptación (acceptance fields) ------------------------- */
.ct-field--check {
  display: flex;
  align-items: flex-start;
  gap: var(--nm-space-1);
}
.ct-check {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  padding: 0;
  border: 2px solid var(--ct-check-border);
  background: var(--nm-white);
  accent-color: var(--nm-beige);
}
.ct-check-label {
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-base);
  font-weight: 500;
  line-height: 1.5;
  color: var(--nm-taupe);
}
.ct-check-label a {
  color: var(--nm-beige); /* estilo en línea del original: #CDC3B3 */
  text-decoration: none;
}
.ct-check-label a:hover {
  text-decoration: underline;
}
.ct-check-label b {
  font-weight: 500;
}

/* --- Botón de envío ------------------------------------------------------- */
.ct-field--submit {
  text-align: start;
} /* elementor-button-align-start */
.ct-submit {
  background: var(--nm-beige);
  color: var(--nm-white);
  font-size: var(--nm-fs-base);
  font-weight: 700;
  letter-spacing: 1.7px; /* literal del original */
  text-transform: none; /* el original NO pone «Enviar» en mayúsculas */
  border-radius: var(--nm-radius);
  padding: 20px 60px;
}
.ct-submit:hover {
  background: var(--nm-taupe);
}

/* --- Honeypot ------------------------------------------------------------- */
/* Fuera de la vista pero dentro del DOM: `display:none` lo saltan algunos bots.
   No se anuncia (aria-hidden + tabindex=-1 en la plantilla). */
.ct-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Turnstile ------------------------------------------------------------ */
/* El widget mide 300×65 (tema light). Solo se reserva el hueco para que no
   salte el layout al cargar; el resto lo pinta el iframe de Cloudflare. */
.ct-turnstile {
  min-height: 65px;
}

/* --- Aviso de envío (éxito / error) --------------------------------------- */
.ct-msg {
  margin: var(--nm-space-2) 0 0;
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-base);
  font-weight: 500;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: var(--nm-radius);
  border-inline-start: 3px solid currentColor;
  background: var(--nm-beige-15);
  color: var(--nm-taupe);
}
.ct-msg--ok {
  color: var(--nm-beige);
}
.ct-msg--err {
  color: #9b2c2c; /* rojo de aviso: no hay token de error en la marca */
}
.ct-msg--wait {
  color: var(--nm-taupe);
}
.ct-submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* --- Página de respuesta sin JavaScript ----------------------------------- */
/* La pinta el Worker (src/worker/contact.route.ts) cuando el POST es nativo.
   Sin header ni footer: solo el aviso y la vuelta al formulario. */
.ct-reply {
  max-width: 640px;
  padding-block: var(--nm-space-6);
}
.ct-reply .ct-title {
  margin-bottom: var(--nm-space-3);
}
.ct-reply-back {
  display: inline-block;
  margin-top: var(--nm-space-3);
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-base);
  font-weight: 700;
  letter-spacing: 1.7px;
  color: var(--nm-white);
  background: var(--nm-beige);
  border-radius: var(--nm-radius);
  padding: 20px 60px;
  text-decoration: none;
  transition: background var(--nm-transition);
}
.ct-reply-back:hover {
  background: var(--nm-taupe);
  color: var(--nm-white);
}

@media (max-width: 767px) {
  .ct-field--submit {
    text-align: center;
  }
}

/* --- Animaciones de entrada al hacer scroll ------------------------------- */
/*
   Réplica sobria de las "entrance animations" de Elementor del WP original
   (fadeIn / fadeInUp, sin retardo salvo dos casos de 200 ms). Allí duran 1,2 s
   y se aplican widget a widget; aquí una sola transición de 0,5 s sobre bloques
   de sección, con un desplazamiento de 16 px.

   CONTRATO (no lo rompas):
   1. El contenido SIEMPRE está en el HTML y es visible por defecto. La clase
      `.anim-in` la pone el script de Layout.tsx en tiempo de ejecución y SOLO
      sobre elementos que en ese momento están por debajo del pliegue: sin JS,
      con JS roto o para un crawler no se oculta absolutamente nada.
   2. `.js-anim` (en <html>) es el interruptor global: el script lo quita si algo
      falla, y todo vuelve a verse.
   3. `prefers-reduced-motion: reduce` desactiva la animación por partida doble
      (el script no marca nada y el CSS neutraliza el estado inicial), para que
      también funcione si el ajuste cambia con la página ya cargada.
   El hero y todo lo que entre en el primer viewport quedan fuera: ni se ocultan
   ni animan, para no tocar el LCP ni provocar parpadeos.
*/
.js-anim .anim-in {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.5s ease-out,
    transform 0.5s ease-out;
}
.js-anim .anim-in.is-inview {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .anim-in,
  .js-anim .anim-in.is-inview {
    opacity: 1;
    transform: none;
    transition: none;
  }
}