/* =========================================================
   Landing Endodoncia Exclusiva · endodonciapontevedra.com
   Cargado por el tema hijo (functions.php).
   Cabecera y footer: los da Kadence (ver style.css)
   Paleta: #C7D5E4 (principal) · #003049 (contraste) · #FFFFFF
   Breakpoints: ≤480 · 481–768 · 769–1024 · ≥1025
   ========================================================= */

/* ---------- 0. Base ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.endo-page {
  --endo-azul: #003049;
  --endo-azul-hover: #002238;
  --endo-gris: #C7D5E4;
  --endo-blanco: #FFFFFF;
  --endo-pad-y: 46px;
  --endo-pad-x: 30px;
  font-family: 'Century Gothic', 'Questrial', sans-serif;
  color: var(--endo-azul);
  background: var(--endo-blanco);
  font-size: 18px;
  line-height: 1.6;
}
.endo-page *, .endo-page *::before, .endo-page *::after { box-sizing: border-box; }
.endo-page a { color: var(--endo-azul); }
.endo-page a:hover { color: var(--endo-azul-hover); }
.endo-page a:focus-visible, .endo-page button:focus-visible, .endo-page summary:focus-visible {
  outline: 3px solid var(--endo-azul); outline-offset: 3px;
}
.endo-page h1, .endo-page h2, .endo-page h3, .endo-page p, .endo-page ul, .endo-page ol, .endo-page figure { margin: 0; }
.endo-page h1 { font-size: clamp(28px, 5vw, 44px); font-weight: 700; line-height: 1.12; text-wrap: balance; }
.endo-page h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.2; text-wrap: balance; }
.endo-page h3 { font-size: clamp(18px, 1.6vw, 21px); font-weight: 700; line-height: 1.3; }
.endo-page p { text-wrap: pretty; }

.endo-wrap { max-width: 1200px; margin: 0 auto; padding: var(--endo-pad-y) var(--endo-pad-x); display: flex; flex-direction: column; gap: 32px; }
.endo-seccion { scroll-margin-top: 96px; }
.endo-seccion--gris { background: var(--endo-gris); }
.endo-cabecera { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.endo-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* Guiño al folleto: filete fino tipo logotipo ANDRÉS / DOMÍNGUEZ */
.endo-filete { display: block; width: 64px; height: 0; border-top: 1.5px solid var(--endo-azul); }

.endo-pendiente { background: #ffe66d; color: #003049; padding: 1px 6px; border-radius: 4px; font-weight: 700; }

/* ---------- 1. Botones (mismo lenguaje que la clínica) ---------- */
.endo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 28px; border-radius: 999px;
  font: 700 17px/1.2 'Century Gothic', 'Questrial', sans-serif; text-decoration: none; text-align: center;
  border: 2px solid var(--endo-azul); transition: transform .2s ease-out, background-color .2s ease-out, color .2s ease-out;
}
.endo-btn:hover { transform: translateY(-2px); }
.endo-btn--primario { background: var(--endo-azul); color: var(--endo-blanco) !important; }
.endo-btn--primario:hover { background: var(--endo-azul-hover); }
.endo-btn--secundario { background: var(--endo-blanco); color: var(--endo-azul) !important; }
.endo-btn--secundario:hover { background: var(--endo-gris); }
.endo-acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 3. Hero · ancho con carrusel de fondo ---------- */
.endo-hero { padding: 20px var(--endo-pad-x) 0; }
.endo-hero__marco { position: relative; max-width: 1200px; margin: 0 auto; min-height: 560px; border-radius: 24px; overflow: hidden; background: var(--endo-gris); display: flex; align-items: center; }
.endo-hero__slides { position: absolute; inset: 0; z-index: 0; }
.endo-carrusel__slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease-out, visibility 0s linear .6s; }
.endo-carrusel__slide.is-activa { opacity: 1; visibility: visible; transition: opacity .6s ease-out, visibility 0s; }
.endo-carrusel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Opacidad ≥ .85 bajo toda la columna de texto (≈52% del ancho) */
.endo-hero__degradado { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(199,213,228,.95) 0%, rgba(199,213,228,.9) 50%, rgba(199,213,228,.35) 72%, rgba(199,213,228,0) 100%); }
.endo-hero__texto { position: relative; z-index: 2; max-width: 560px; padding: 60px 40px; display: flex; flex-direction: column; gap: 18px; }
/* Logo blanco del archivo teñido a #003049 (cae sobre el degradado) */
.endo-hero__logo { height: 120px; width: auto; align-self: flex-start; object-fit: contain; display: block; filter: brightness(0) saturate(100%) invert(13%) sepia(58%) saturate(2470%) hue-rotate(181deg) brightness(93%) contrast(101%); }
.endo-hero__sub { font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; }
.endo-hero__intro { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .endo-carrusel__slide, .endo-carrusel__slide.is-activa { transition: none; } }

/* ---------- 4. Carta del doctor ---------- */
.endo-carta { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 44px; align-items: start; }
.endo-carta__foto { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--endo-gris); }
.endo-carta__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.endo-carta__texto { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.endo-carta__saludo { font-weight: 700; }
.endo-carta__firma { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1.5px solid var(--endo-azul); width: fit-content; min-width: 260px; }
.endo-carta__firma strong { font-size: 19px; }

/* ---------- 5. Servicios ---------- */
/* Fichas achatadas: número a la izquierda, texto a la derecha */
.endo-servicios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; list-style: none; padding: 0; }
.endo-servicio { background: var(--endo-blanco); border-radius: 20px; padding: 14px 18px; min-height: 72px; display: flex; align-items: center; gap: 14px; }
.endo-servicio__num { flex: none; width: 36px; font-size: 15px; font-weight: 700; letter-spacing: .08em; padding-right: 12px; border-right: 1.5px solid var(--endo-azul); align-self: stretch; display: flex; align-items: center; }
.endo-servicio__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.endo-servicio h3 { font-size: 17px; line-height: 1.3; }
.endo-servicio p { font-size: 15px; line-height: 1.4; }
.endo-servicio--doble { grid-column: span 2; }

/* ---------- 6. Tecnología ---------- */
.endo-tec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.endo-tec__item { border: 2px solid var(--endo-gris); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.endo-tec__img { aspect-ratio: 16 / 9; background: var(--endo-gris); display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-size: 15px; }
.endo-tec__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.endo-tec__cuerpo { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.endo-tec__lista { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

/* ---------- 7. Casos clínicos ---------- */
.endo-casos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.endo-caso { background: var(--endo-blanco); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.endo-caso__serie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.endo-caso__letra { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; border-radius: 999px; background: var(--endo-blanco); color: var(--endo-azul); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.endo-caso figcaption { display: flex; flex-direction: column; gap: 4px; }
.endo-caso figcaption p { font-size: 16px; }

/* ---------- 8. Protocolo de derivación ---------- */
.endo-pasos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: endo-paso; }
.endo-paso { border: 2px solid var(--endo-azul); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 10px; counter-increment: endo-paso; }
.endo-paso::before { content: counter(endo-paso); width: 44px; height: 44px; border-radius: 999px; background: var(--endo-azul); color: var(--endo-blanco); font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.endo-paso--destacado { background: var(--endo-gris); }
.endo-nota { background: var(--endo-gris); border-radius: 20px; padding: 18px 22px; font-weight: 700; }

/* ---------- 9. Bloque paciente ---------- */
.endo-paciente { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.endo-paciente__texto { display: flex; flex-direction: column; gap: 6px; max-width: 680px; min-width: 0; flex: 1 1 320px; }

/* ---------- 12. Barra fija móvil ---------- */
.endo-barra-movil { display: none; }

/* =========================================================
   TABLET · 769–1024
   ========================================================= */
@media (min-width: 769px) and (max-width: 1024px) {
  .endo-hero__marco { min-height: 480px; }
  .endo-hero__texto { max-width: 520px; }
  .endo-hero__logo { height: 96px; }
  .endo-hero__degradado { background: linear-gradient(100deg, rgba(199,213,228,.95) 0%, rgba(199,213,228,.9) 62%, rgba(199,213,228,.4) 84%, rgba(199,213,228,0) 100%); }
  .endo-carta { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 30px; }
  .endo-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .endo-servicio--doble { grid-column: 1 / -1; }
}

/* =========================================================
   MÓVIL · ≤768
   ========================================================= */
@media (max-width: 768px) {
  .endo-page { --endo-pad-y: 34px; --endo-pad-x: 24px; font-size: 17px; padding-bottom: 84px; }
  .endo-hero { padding: 12px 12px 0; }
  .endo-hero__marco { min-height: 0; flex-direction: column; align-items: stretch; }
  /* 220px de imagen libre arriba; el degradado llega a .9 antes del texto */
  .endo-hero__degradado { background: linear-gradient(180deg, rgba(199,213,228,.15) 0px, rgba(199,213,228,.75) 170px, rgba(199,213,228,.9) 230px, rgba(199,213,228,.96) 100%); }
  .endo-hero__texto { max-width: none; padding: 252px 20px 32px; }
  .endo-hero__logo { height: 80px; }
  .endo-carta { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .endo-carta__foto { max-width: 280px; }
  .endo-servicios, .endo-tec, .endo-casos, .endo-pasos { grid-template-columns: minmax(0, 1fr); }
  .endo-servicios { grid-auto-rows: auto; }
  .endo-servicio--doble { grid-column: auto; }
  .endo-acciones { flex-direction: column; }
  .endo-btn { width: 100%; }
  .endo-paciente { flex-direction: column; align-items: stretch; }
  .endo-wrap { gap: 26px; }
  .endo-cabecera { max-width: none; }
  .endo-carta__firma { min-width: 0; width: 100%; }
  .endo-paciente__texto { flex: none; }
  .endo-paciente .endo-btn { width: 100%; }
  .endo-servicio h3 { font-size: 16px; }

  .endo-barra-movil { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--endo-blanco); border-top: 2px solid var(--endo-gris); }
  .endo-barra-movil .endo-btn { min-height: 52px; padding: 12px; }
}

/* =========================================================
   EXTRA MÓVIL · ≤480
   ========================================================= */
@media (max-width: 480px) {
  .endo-page { --endo-pad-y: 26px; --endo-pad-x: 16px; font-size: 16px; }
  .endo-caso__serie { gap: 6px; }
  .endo-hero { padding: 8px 8px 0; }
  .endo-hero__texto { padding: 236px 16px 26px; }
  .endo-servicio { padding: 12px 14px; gap: 12px; }
  .endo-caso { padding: 14px; }
  .endo-paso, .endo-tec__cuerpo { padding: 20px 18px; }
  .endo-barra-movil { padding-left: 12px; padding-right: 12px; gap: 8px; }
}

/* ============================================================ */
/* LANDING ENDODONCIA · CASOS CLÍNICOS + CONTACTO               */
/* Pegar al FINAL de endo-landing.css (o del CSS adicional del  */
/* WordPress de endodonciapontevedra.com).                       */
/* Sustituye las reglas antiguas de .endo-caso__rx con texto     */
/* «Rx inicial/final» y de .contacto-* (ya no se usan).          */
/* Cortes del proyecto: ≥1025 / 769–1024 / ≤768 / ≤480           */
/* ============================================================ */

/* ---------- CASOS CLÍNICOS ---------- */
/* Escritorio: 36 | 45 en dos columnas; 11 y 24 a todo el ancho */
.endo-casos {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 24px;
}
.endo-caso {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.endo-caso--3,
.endo-caso--5 { grid-column: 1 / -1; }

.endo-caso__serie { display: grid; gap: 10px; }
.endo-caso--4 .endo-caso__serie { grid-template-columns: repeat(2, minmax(0,1fr)); }   /* 2 × 2 */
.endo-caso--5 .endo-caso__serie { grid-template-columns: repeat(5, minmax(0,1fr)); }   /* fila de 5 */

/* Pieza 11: 3 Rx verticales a la izquierda y la leyenda a la derecha,
   para que ninguna Rx pase de ~214px */
.endo-caso--3 {
  display: grid;
  grid-template-columns: minmax(0,680px) minmax(0,1fr);
  align-items: center;
  gap: 24px;
}
.endo-caso--3 .endo-caso__serie { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* Cada Rx: entera (contain) sobre fondo oscuro, como en un visor */
.endo-caso__rx {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #0E1418;
  border-radius: 14px;
  overflow: hidden;
}
.endo-caso--3 .endo-caso__rx { aspect-ratio: 3 / 4; }
.endo-caso__rx img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.endo-caso__letra {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #003049;
}
.endo-caso figcaption h3 { margin: 0; color: #003049; }
.endo-caso figcaption p  { margin: 4px 0 0; color: #003049; }   /* nunca #666 sobre #C7D5E4 */

/* TABLET (769–1024): 1 columna, cada caso con tope de 720px centrado */
@media (max-width: 1024px) {
  .endo-casos { grid-template-columns: minmax(0,1fr); }
  .endo-casos { justify-items: center; }
  .endo-caso { width: 100%; max-width: 720px; }
  .endo-caso--3 { display: flex; }                                  /* leyenda debajo */
  .endo-caso--5 .endo-caso__serie { grid-template-columns: repeat(3, minmax(0,1fr)); }  /* 3 + 2 */
}

/* MÓVIL (≤768) */
@media (max-width: 768px) {
  .endo-casos { gap: 20px; }
  .endo-caso__serie { gap: 8px; }
}

/* ---------- CONTACTO · IDÉNTICO A LA CLÍNICA (.cad-contacto) ---------- */
#contacto.cad-contacto { background: #FDFBF7; padding: 46px 30px; margin: 0; }
.cad-contacto__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.cad-contacto__intro { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.cad-contacto__h2 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.15; color: #003049; }
.cad-contacto__lead { margin: 0; font-size: 18px; line-height: 1.55; color: #666666; }

.cad-contacto__canales {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr);
  gap: 14px;
}
.cad-contacto .cad-contacto__canal {
  min-width: 0;
  min-height: 84px;
  box-sizing: border-box;
  padding: 14px 20px;
  border-radius: 20px;
  border: 2px solid #003049;
  background: transparent;
  color: #003049;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  transition: transform .2s ease-out, box-shadow .2s ease-out, background-color .2s ease-out;
}
.cad-contacto .cad-contacto__canal--principal { background: #003049; color: #FFFFFF; }
.cad-contacto__canal-label { font-size: 16px; font-weight: 400; line-height: 1.3; }
.cad-contacto__canal-valor { font-size: 24px; font-weight: 700; line-height: 1.2; }
.cad-contacto__canal--email .cad-contacto__canal-valor { font-size: 18px; white-space: nowrap; }

@media (hover: hover) {
  .cad-contacto .cad-contacto__canal:hover {
    color: #003049;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,20,32,.15);
  }
  .cad-contacto .cad-contacto__canal--principal:hover { color: #FFFFFF; background: #002238; }
}

.cad-contacto__info {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,2fr);
  gap: 32px;
  align-items: stretch;
}
.cad-contacto__datos { display: grid; grid-template-columns: minmax(0,1fr); gap: 22px 28px; align-content: start; }
.cad-contacto__bloque { display: flex; flex-direction: column; gap: 6px; }
.cad-contacto__bloque--horario { gap: 10px; }
.cad-contacto__titulo {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #003049;
}
.cad-contacto__direccion { margin: 0; font-style: normal; font-size: 18px; line-height: 1.5; color: #003049; }
.cad-contacto__registro { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #003049; }
.cad-contacto__horario { margin: 0; border-top: 1px solid rgba(0,48,73,.14); font-size: 17px; color: #003049; }
.cad-contacto__fila {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(0,48,73,.14);
}
.cad-contacto__fila dt,
.cad-contacto__fila dd { margin: 0; }
.cad-contacto__fila dt { font-weight: 400; }
.cad-contacto__fila dd { font-weight: 700; text-align: right; white-space: nowrap; }
.cad-contacto__mapa { height: 380px; border-radius: 20px; overflow: hidden; background: rgba(0,48,73,.08); }
.cad-contacto__mapa iframe { border: 0; width: 100%; height: 100%; display: block; }

/* TABLET (≤1024) · DECISIÓN DEL ESTUDIO: datos y mapa APILADOS desde tablet
   (en la clínica se apilan solo en ≤768). Datos en 2 columnas sobre el mapa. */
@media (max-width: 1024px) {
  #contacto.cad-contacto { padding: 34px 24px; }
  .cad-contacto__inner { gap: 34px; }
  .cad-contacto__canales { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .cad-contacto__canal--email { grid-column: 1 / -1; }
  .cad-contacto__canal-valor { font-size: 22px; }
  .cad-contacto__info { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .cad-contacto__datos { grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); }
  .cad-contacto__mapa { height: 360px; }
}

/* MÓVIL (≤768) */
@media (max-width: 768px) {
  #contacto.cad-contacto { padding: 26px 16px; }
  .cad-contacto__inner { gap: 30px; }
  .cad-contacto__lead { font-size: 17px; }
  .cad-contacto__canal-valor { font-size: 21px; }
  .cad-contacto__canal--email .cad-contacto__canal-valor { font-size: 17px; }
  .cad-contacto__direccion { font-size: 17px; }
  .cad-contacto__horario { font-size: 16px; }
  .cad-contacto__mapa { height: 300px; }
}

/* EXTRA MÓVIL (≤480) */
@media (max-width: 480px) {
  .cad-contacto__inner { gap: 26px; }
  .cad-contacto__lead { font-size: 16px; }
  .cad-contacto__canales { grid-template-columns: minmax(0,1fr); }
  .cad-contacto__canal--email { grid-column: auto; }
  /* El email salta justo antes de la @ si no cabe */
  .cad-contacto__canal--email .cad-contacto__canal-valor { font-size: 15.5px; white-space: normal; }
  .cad-contacto__email-usuario,
  .cad-contacto__email-dominio { display: inline-block; white-space: nowrap; }
  .cad-contacto__datos { grid-template-columns: minmax(0,1fr); }
  .cad-contacto__direccion { font-size: 16px; }
  .cad-contacto__mapa { height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .cad-contacto .cad-contacto__canal { transition: none; }
  .cad-contacto .cad-contacto__canal:hover { transform: none; }
}

/* WordPress puede convertir saltos de línea en <br>: se ignoran en los canales */
.cad-contacto__canales > br,
.cad-contacto__canal br { display: none; }