/* Clínica Dental Guinea — estilos de la versión estática.
   El diseño está en los estilos en línea de cada página (copiados del render de Claude
   Design). Aquí solo van los valores que el original calculaba con JavaScript según el
   ancho de pantalla o el puntero, expresados como media queries con los mismos cortes. */

/* Fuentes locales (assets/fonts, licencia SIL OFL 1.1 junto a cada archivo). Son los mismos
   archivos WOFF2 del subconjunto latino que servía Google Fonts para la hoja que piden las
   fuentes .dc.html, con el mismo unicode-range y font-display; la compilación quita del <head>
   los enlaces a Google Fonts. Solo se declaran los pesos y estilos que usa la web: Cormorant
   Garamond 400 normal y cursiva, e Inter 400 y 500 (archivo variable compartido). */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/cormorant-garamond-latin.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: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/cormorant-garamond-italic-latin.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: 400; font-display: swap; src: url(/assets/fonts/inter-latin.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-latin.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; }

/* Cabecera (Nav.dc.html): escritorio >= 1080 px, teléfono visible >= 1200 px (el original lo
   mostraba desde 1280 px; desde 1200 cabe sin partir los enlaces del menú en dos líneas) */
.cg-nav-desktop { display: none; }
.cg-nav-burger { display: flex; }
.cg-nav-phone { display: none; }
@media (min-width: 1080px) {
  .cg-nav-desktop { display: flex; }
  .cg-nav-burger { display: none; }
}
@media (min-width: 1200px) {
  .cg-nav-phone { display: inline-flex; }
}

/* Menú móvil abierto: su desplazamiento no se transmite a la página de fondo */
#menu-movil { overscroll-behavior: contain; }
/* Menú móvil: «Pide tu cita» y «Llamar» (último bloque del menú) quedan fijos al pie del área
   desplazable, visibles al abrir sin desplazar. Los márgenes negativos compensan el relleno del
   <nav>; la zona segura va en el relleno del propio bloque. */
#menu-movil nav > div:last-child {
  position: sticky; bottom: 0; z-index: 1;
  margin: 0 calc(-1 * clamp(20px, 5vw, 48px)) -48px;
  padding: 14px clamp(20px, 5vw, 48px) calc(14px + env(safe-area-inset-bottom)) !important;
  background: #F7F4EF; border-top: 1px solid rgba(184, 151, 112, 0.35);
}
/* Al desplazar por el foco, el contorno (2 px a 3 px del borde) queda dentro del área visible: 8 px
   arriba y, abajo, el alto real del bloque fijo (--cta-h, que site.js mide e incluye la zona
   segura) más 8 px. */
#menu-movil { scroll-padding-top: 8px; scroll-padding-bottom: calc(var(--cta-h, 0px) + 8px); }

/* Foco visible bajo las barras fijas (WCAG 2.4.11). Al desplazar para mostrar el elemento
   enfocado o un ancla, se reserva el alto de la cabecera fija (85 px) y, en móvil, el de la
   barra inferior Llamar/WhatsApp (71 px + zona segura), más un margen para el contorno de foco. */
html { scroll-padding-top: 96px; }
@media (max-width: 767px) {
  html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
/* La clínica fija scroll-margin-top: 110px en sus anclas; con el scroll-padding anterior se
   sumarían. Se reduce a 14 px para que el salto a #equipo siga quedando a 110 px (96 + 14). */
[id] { scroll-margin-top: 14px; }

/* Contraste del indicador de foco (WCAG 1.4.11, 3:1). El dorado #B89770 da 2,07-2,72 sobre los
   cremas; #95724A, del mismo tono, da 3,34-4,38 sobre todos los fondos lisos, incluido el verde
   #1E2B28 del pie. Sobre el vídeo de la portada ningún color único llega a 3:1 frente a sus
   zonas claras y oscuras, así que allí el contorno va sobre un halo crema (doble contorno, C40).
   En la cabecera, solo mientras es transparente: site.js marca data-solid cuando toma fondo. */
:focus-visible { outline-color: #95724A; }
header[data-over-hero]:not([data-solid]) :focus-visible,
section[aria-label="Presentación"] :focus-visible { box-shadow: 0 0 0 7px #F7F4EF; }

/* La clínica: rol de cada miembro del equipo (12 px). #8C6C47 da 4,39 sobre #F7F4EF; #886945,
   del mismo tono, da 4,60 (WCAG 1.4.3, 4,5:1). El color está en línea, de ahí !important. */
#equipo h3 + p { color: #886945 !important; }

/* Contraste del texto con el ratón encima (WCAG 1.4.3, 4,5:1). Las plantillas cambian el color en
   :hover con clases que genera la compilación a partir de style-hover (nombres estables derivados
   de su contenido); estas reglas solo ganan en los contextos que no llegan a 4,5:1.
   - Enlaces de la cabecera (.u1s2sbdq): #B89770 da 2,49 sobre crema. Con la cabecera sólida,
     #886945 da 4,61. Sobre el vídeo de Inicio ningún dorado llega a 4,5:1 (con #7A5D3B aún falla
     el 72-87 % del fondo), así que allí el texto conserva su color y se subraya. En el pie, sobre
     verde, #B89770 da 5,38 y no cambia.
   - Enlaces y botones de texto (.uf669v0: «Leer más», preguntas frecuentes por debajo de 1280 px,
     enlaces legales…): #8C6C47 da 4,40 sobre #F7F4EF y 3,68 sobre #E6E0D6 (enlace a las reseñas
     de Google); #886945 da 4,61 y, sobre #E6E0D6, #7A5D3B da 4,63. Las flechas y el «+» que
     acompañan son decorativos (aria-hidden) y superan el 3:1 de los elementos gráficos. */
header a.u1s2sbdq:hover { color: #886945 !important; }
header[data-over-hero]:not([data-solid]) a.u1s2sbdq:hover { color: #1E2B28 !important; text-decoration: underline !important; text-underline-offset: 4px; }
:is(a, button).uf669v0:hover { color: #886945 !important; }
section[aria-labelledby="opiniones"] a.uf669v0:hover { color: #7A5D3B !important; }

/* Contacto: el mapa combina aspect-ratio 21/9 con min-height 320px, lo que por debajo de
   ~830 px fuerza un ancho mínimo de 747 px y desborda la página. En ese rango la altura que
   busca el diseño ya es 320 px, así que se fija esa altura y se libera la proporción. */
@media (max-width: 830px) {
  section[aria-label="Mapa"] [data-map] { aspect-ratio: auto !important; height: 320px; }
}

/* Pie (Footer.dc.html): barra Llamar/WhatsApp y posición del aviso de cookies < 768 px */
.cg-mobile-bar { display: flex; }
.cg-mobile-bar-spacer { height: 72px; }
.cg-cookie-banner { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) {
  .cg-mobile-bar { display: none; }
  .cg-mobile-bar-spacer { height: 0px; }
  .cg-cookie-banner { bottom: 16px; }
}
/* Pantallas de poca altura (móvil en horizontal, zoom al 200 % en portátiles): la cabecera (85 px) y la
   barra (71 px) llegaban a ocupar el 42-49 % de la ventana. Por debajo de 451 px de alto se retira la
   barra; Llamar y WhatsApp siguen en el menú (la compilación añade WhatsApp junto a Llamar) y el aviso
   de cookies y el margen de desplazamiento por el foco dejan de reservar su altura. */
@media (max-width: 767px) and (max-height: 450px) {
  .cg-mobile-bar { display: none; }
  .cg-mobile-bar-spacer { height: 0px; }
  .cg-cookie-banner { bottom: calc(16px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}
/* Correo del pie: no se partía (nowrap en línea, de ahí !important) y a 320 px un correo de más de
   ~37 caracteres saldría de la pantalla. Sin espacios, solo se parte cuando no cabe: igual que antes. */
footer a[href^="mailto:"] { white-space: normal !important; overflow-wrap: anywhere; }
/* Aviso de cookies: en móvil, más compacto (mismo texto y botones) para que tape menos pantalla;
   desde 1080 px, arriba a la derecha bajo la cabecera, donde no tapa los botones de la portada
   ni el título. Entre 768 y 1079 px no cambia. Los estilos del aviso están en línea, de ahí !important. */
@media (max-width: 767px) {
  .cg-cookie-banner { padding: 16px !important; }
  #cookies-titulo { font-size: 21px !important; }
  #cookies-titulo + p { font-size: 14px !important; line-height: 1.5 !important; }
  .cg-cookie-banner [data-consent] { height: 44px !important; }
}
@media (min-width: 1080px) {
  .cg-cookie-banner { top: 101px; right: 16px; bottom: auto; left: auto !important; }
}
/* Con el menú móvil abierto, el aviso se oculta para que no tape enlaces del menú que siguen
   recibiendo el foco; al cerrarlo vuelve tal como estaba (site.js marca data-menu-abierto en la
   cabecera; el atributo hidden del aviso, que gestiona el consentimiento, no se toca). */
header[data-menu-abierto] ~ .cg-cookie-banner { display: none; }
/* Con el menú móvil abierto, «Saltar al contenido» apuntaría a contenido inerte: se retira para que
   no se pueda enfocar ni activar, y vuelve a estar disponible al cerrar el menú. */
header[data-menu-abierto] a[href="#contenido"] { display: none; }

/* Portada (Inicio.dc.html): velo sobre el vídeo y encuadre en vertical */
.cg-hero-overlay { background: linear-gradient(180deg,rgba(247,244,239,.45) 0%,rgba(247,244,239,.4) 60%,rgba(247,244,239,0) 85%); }
/* Escritorio (desde 1280 px; de 768 a 1279 lo sustituye la regla siguiente): velo horizontal algo más
   largo bajo el final de las líneas de la entradilla (41-46 % del ancho), donde el original (.25 al 35 %,
   0 al 58 %) dejaba un 2,1 % del fondo por debajo de 4,5:1 a 1440×900 y hasta un 3 % a 1920×1080. */
@media (min-width: 768px) {
  .cg-hero-overlay { background: linear-gradient(90deg,rgba(247,244,239,.4) 0%,rgba(247,244,239,.32) 35%,rgba(247,244,239,.26) 45%,rgba(247,244,239,.14) 55%,rgba(247,244,239,0) 64%); }
}
/* Tablet (768–1279 px): velo horizontal reforzado bajo la entradilla, que aquí ocupa más ancho */
@media (min-width: 768px) and (max-width: 1279px) {
  .cg-hero-overlay { background: linear-gradient(90deg,rgba(247,244,239,.4) 0%,rgba(247,244,239,.36) 35%,rgba(247,244,239,.3) 50%,rgba(247,244,239,.18) 60%,rgba(247,244,239,0) 72%); }
}
/* Franja superior bajo la cabecera transparente (estilo en línea, de ahí !important): con .45 los
   enlaces de la cabecera quedaban con un 1,2-2 % del fondo por debajo de 4,5:1 a 1180-1280 px. */
@media (min-width: 1080px) {
  section[aria-label="Presentación"] > .cg-hero-overlay + div[aria-hidden="true"] { background: linear-gradient(rgba(247,244,239,.55), rgba(247,244,239,0)) !important; }
}
/* Texto pequeño sobre el vídeo (etiqueta, entradilla y enlaces de la cabecera transparente): con los
   velos, algún píxel de las hojas más oscuras seguía bajo los trazos con menos de 4,5:1 en ciertos
   fotogramas (mínimo 3,64 a 768 px). Un halo crema muy suave pegado a los glifos lo resuelve sin
   aclarar el resto del vídeo; la capa de 3 px refuerza el fondo junto al borde de las letras. */
section[aria-label="Presentación"] p:first-of-type,
section[aria-label="Presentación"] h1 + p,
header[data-over-hero]:not([data-solid]) a.u1s2sbdq { text-shadow: 0 0 1px rgba(247,244,239,.95), 0 0 3px rgba(247,244,239,.85), 0 0 6px rgba(247,244,239,.7); }
/* Entradilla de Inicio un punto más oscura (ΔE ≈ 0,9, imperceptible): al final de la línea («tiempo»,
   768 px) el halo solo llega de un lado y el fondo junto a la letra se quedaba en 4,43:1; con #1C2926
   el mínimo medido es 4,55:1. !important porque el color viene en estilo en línea. */
section[aria-label="Presentación"] h1 + p { color: #1C2926 !important; }
.cg-hero-media { object-position: center center; }
@media (orientation: portrait) {
  .cg-hero-media { object-position: 72% center; }
}

/* Reseñas (Inicio): flechas del carrusel >= 768 px */
.cg-reviews-arrows { display: none; }
@media (min-width: 768px) {
  .cg-reviews-arrows { display: flex; }
}

/* Tarjetas de tratamientos en Inicio. La frase se ve siempre; con ratón, la flecha aparece
   al pasar por encima o al enfocar, y en pantallas táctiles se ve siempre. */
.cg-tcard { background: #EFEAE2; }
.cg-tcard-arrow { opacity: 1; transform: translateX(-6px); }
.cg-tcard-line { opacity: 1; transform: translateY(0); }
@media (hover: hover) {
  .cg-tcard-arrow { opacity: 0; }
}
.cg-tcard:hover, .cg-tcard:focus-within { background: #F7F4EF; }
/* El desplazamiento de la flecha al pasar por encima, solo con hover real (un toque no la mueve);
   con el foco del teclado se mueve en todos los dispositivos. */
.cg-tcard:focus-within .cg-tcard-arrow { opacity: 1; transform: translateX(0); }
@media (hover: hover) {
  .cg-tcard:hover .cg-tcard-arrow { opacity: 1; transform: translateX(0); }
}

/* Tarjetas de la página Tratamientos */
.cg-tcard2 { background: rgba(230,224,214,.45); border-color: rgba(184,151,112,.25); }
.cg-tcard2-arrow { opacity: .35; }
.cg-tcard2:hover, .cg-tcard2:focus { background: #E6E0D6; border-color: rgba(184,151,112,.7); }
.cg-tcard2:hover .cg-tcard2-arrow, .cg-tcard2:focus .cg-tcard2-arrow { opacity: 1; }

/* Inicio, equipo (H05): 1, 2 o 4 columnas según el ancho real de la lista, nunca 3 (que dejaba una
   tarjeta sola). Mínimo de columna: (100% − huecos) / 4 si caben 4 de 150 px (lista ≥ 660 px),
   (100% − hueco) / 2 si la lista mide ≥ 320 px y el 100 % por debajo; el −1px absorbe redondeos.
   Cuando no caben 4, la lista se limita a dos tarjetas de 220 px para no alargar la sección.
   Los estilos de la rejilla están en línea, de ahí !important. */
section[aria-labelledby="equipo"] ul {
  grid-template-columns: repeat(auto-fill, minmax(max(calc((100% - 61px) / 4),
    min(calc((100% - 21px) / 2), calc((660px - 100%) * 99999)),
    min(100%, calc((320px - 100%) * 99999))), 1fr)) !important;
  max-width: max(460px, calc((100% - 660px) * 99999));
}
/* Que el texto del cargo no ensanche la tarjeta (y con ella el retrato) */
section[aria-labelledby="equipo"] ul > li { grid-template-columns: minmax(0, 1fr); }

/* Megamenú: entre 1080 y 1144 px la flecha de «Ver todos los tratamientos →» quedaba sola en una
   segunda línea. Con líneas equilibradas queda «Ver todos los / tratamientos →»; cuando cabe en una
   línea no cambia nada. Sin soporte de text-wrap, el navegador se comporta como antes. */
#megamenu a[href="/tratamientos/"] > span:last-child { text-wrap: balance; }

/* Contacto, horario: cada rango en una sola línea (con horario partido, «15:30–» quedaba arriba y
   «19:30» abajo a 320 px). Si falta sitio, es el nombre del día el que pasa a dos líneas. */
.cg-horario td { white-space: nowrap; }

/* Páginas legales (data-legal lo marca la compilación). Correos, dominios y nombres de cookie sin
   espacios se parten si no caben, en lugar de ensanchar la página (un correo de 41 caracteres la
   llevaba a 382 px de ancho en una pantalla de 320). */
[data-legal] { overflow-wrap: anywhere; }
/* Tablas legales (la de cookies llegará con el contenido definitivo), con el estilo de la tabla de
   horario de Contacto. Por debajo de 768 px cada fila se apila como una ficha y cada dato lleva su
   cabecera (data-label, que añade la compilación junto con roles de tabla explícitos); la fila de
   cabecera se oculta solo a la vista. */
[data-legal] table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; overflow-wrap: break-word; }
[data-legal] th, [data-legal] td { text-align: left; vertical-align: top; padding: 10px 16px 10px 0; border-bottom: 1px solid rgba(184,151,112,.35); color: #5C6461; }
[data-legal] thead th { font-weight: 500; color: #1E2B28; border-bottom-color: rgba(184,151,112,.55); }
@media (max-width: 767px) {
  [data-legal] table, [data-legal] tbody, [data-legal] tr, [data-legal] td, [data-legal] tbody th { display: block; }
  [data-legal] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  [data-legal] tr { padding: 12px 0; border-bottom: 1px solid rgba(184,151,112,.35); }
  [data-legal] tbody :is(td, th) { display: grid; grid-template-columns: minmax(6.5rem, 34%) minmax(0, 1fr); gap: 12px; padding: 3px 0; border: 0; }
  [data-legal] tbody [data-label]::before { content: attr(data-label); content: attr(data-label) / ""; font-weight: 500; color: #1E2B28; }
}

/* Desplazamiento instantáneo (auditoría de animaciones). La hoja global de las plantillas fija
   scroll-behavior: smooth, y cada salto de foco con el teclado tardaba ~800 ms en llegar. Los
   desplazamientos que deben ser suaves (botones del carrusel de reseñas) lo piden en site.js. */
html { scroll-behavior: auto; }

/* Impresión: los bloques de aparición que aún no se han revelado tienen opacidad 0 y translateY
   en línea (site.js); al imprimir sin haber recorrido la página salían en blanco. */
@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Estados :hover y :focus de las plantillas (atributos style-hover / style-focus) */
.u18b9vce:hover { border-color: rgb(184, 151, 112) !important; color: rgb(30, 43, 40) !important; }
.u1fk81vj:hover { background: rgb(42, 58, 54) !important; color: rgb(247, 244, 239) !important; }
.u1nmqi6u:hover { border-color: rgb(184, 151, 112) !important; background: rgb(247, 244, 239) !important; }
.u1qyb7pm:hover { border-color: rgb(184, 151, 112) !important; background: rgb(230, 224, 214) !important; color: rgb(30, 43, 40) !important; }
.u1s2sbdq:hover { color: rgb(184, 151, 112) !important; }
.u1yeg148:hover { border-color: rgb(184, 151, 112) !important; color: rgb(184, 151, 112) !important; }
.u9fruo9:focus { left: 16px !important; }
.u9qt884:hover { background: rgb(184, 151, 112) !important; color: rgb(30, 43, 40) !important; }
.ucglh1:hover { border-color: rgb(184, 151, 112) !important; color: rgb(247, 244, 239) !important; }
.uf669v0:hover { color: rgb(140, 108, 71) !important; }
.ufvwrz8:hover { color: rgb(30, 43, 40) !important; }
.ujbt5t8:hover { background: rgb(230, 224, 214) !important; border-color: rgba(184, 151, 112, 0.7) !important; color: rgb(30, 43, 40) !important; }
.uvwoivd:hover { border-color: rgb(184, 151, 112) !important; }
.uyfqy1n:hover { border-color: rgb(184, 151, 112) !important; background: rgb(247, 244, 239) !important; color: rgb(30, 43, 40) !important; }
.uza9kj2:hover { background: rgb(184, 151, 112) !important; border-color: rgb(184, 151, 112) !important; color: rgb(30, 43, 40) !important; }