/* Garrigós — ajustes sobre el CSS base del proyecto */

/* Cargar de verdad las familias que el diseño declara como fallback */
:root {
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* Títulos de sección del contenido: el diseño base usa Cormorant 300 (muy fino)
   y "no se ven bien" (feedback doctora). Les damos peso y un color casi negro. */
main h2,
main h2.font-display {
  font-weight: 700;
  color: oklch(22% .02 60);
  letter-spacing: -0.01em;
}
/* Negritas del contenido: el body es JetBrains Mono y "no se aprecian".
   Las hacemos de verdad negras (700) y mas oscuras. */
main strong, main b {
  font-weight: 700;
  color: oklch(20% .02 60);
}
/* Subtitulo "... en Alicante" bajo (01) El tratamiento */
.gar-colet { margin-top: .25rem; }

/* Preguntas frecuentes en desplegable */
main details { }
main details > summary {
  font-weight: 600;
  color: oklch(24% .02 60);
  padding-right: 1.5rem;
  position: relative;
}
main details > summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-family: var(--font-mono);
  font-weight: 400;
}
main details[open] > summary::after { content: "–"; }

/* ===== Rejilla de tarjetas: separación real entre fotos =====
   El markup del diseño usa `gap-x-5 gap-y-8`, pero esas dos utilidades NO
   están en el Tailwind compilado que acompaña al diseño -> el grid se
   quedaba en gap:0 y las fotos de las tarjetas se tocaban entre sí
   (revisión Esther 22-jul: "separar todas las imágenes, que no se junten").
   Afecta a home y a las 4 páginas de familia. */
.gap-x-5 { column-gap: 1.75rem; }
.gap-y-8 { row-gap: 3rem; }

/* ===== Utilidades que el maquetado usa pero el CSS compilado no trae =====
   styles.css es un Tailwind YA COMPILADO: solo contiene las clases que
   usaba el diseño original. Todo lo que se añadió después a mano (cabeceras
   de las páginas de familia, rejillas, espaciados) quedó sin efecto y en
   silencio. Aquí van esas reglas con su valor estándar de Tailwind.
   Puntos de corte del CSS base: sm 40rem · md 48rem · lg 64rem (no hay xl). */

/* Cabecera con foto de las 4 páginas de familia — sin altura, el contenedor
   colapsaba a 0 y la imagen y el título no se veían desde el 25-jun. */
.h-\[56vh\] { height: 56vh; }
.min-h-\[420px\] { min-height: 420px; }
.text-\[13vw\] { font-size: 13vw; }
.leading-\[0\.98\] { line-height: .98; }
.bg-gradient-to-t.from-foreground\/75.via-foreground\/25 {
  background-image: linear-gradient(to top,
    color-mix(in oklab, var(--foreground) 75%, transparent) 0%,
    color-mix(in oklab, var(--foreground) 25%, transparent) 50%,
    transparent 100%);
}

/* Espaciados y anchos */
.pl-1 { padding-left: .25rem; }
.pt-2 { padding-top: .5rem; }
.pb-2 { padding-bottom: .5rem; }
.py-5 { padding-block: 1.25rem; }
.pb-8 { padding-bottom: 2rem; }
.pb-24 { padding-bottom: 6rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }
.object-contain { object-fit: contain; }

@media (min-width: 40rem) { .sm\:text-6xl { font-size: 3.75rem; line-height: 1; } }
@media (min-width: 48rem) { .md\:text-6xl { font-size: 3.75rem; line-height: 1; } }
@media (min-width: 64rem) {
  .lg\:pb-32 { padding-bottom: 8rem; }
  .lg\:h-9 { height: 2.25rem; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* La rejilla de tarjetas pedía 5 columnas en pantallas grandes, pero el CSS
   base no tiene ni siquiera el punto de corte xl. */
@media (min-width: 80rem) {
  .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Las secciones de Medicina estética son destino de ancla desde el menú y el
   pie (sustituyen a las páginas intermedias). La cabecera es sticky, así que
   hay que dejarle sitio para que el título no quede debajo. */
main section[id] { scroll-margin-top: 96px; }

/* Carrusel de marcas: lg:gap-24 tampoco existe en el CSS compilado */
@media (min-width: 1024px) {
  .lg\:gap-24 { gap: 6rem; }
}

/* Mega-menú desktop: oculto por defecto, visible con .gar-open (JS) */
.gar-dd { display: none; }
@media (min-width: 1024px) {
  .gar-dd.gar-open { display: block; }
}

/* Panel móvil */
#gar-mobile-panel.hidden { display: none; }
details > summary::-webkit-details-marker { display: none; }

/* ===== Fix hero en móvil =====
   El wordmark "DRA. GARRIGÓS" forma parte de la foto; con object-cover
   a 390px quedaba cortado. En móvil: recorte vertical de la imagen en
   flujo normal y el bloque inferior pasa debajo, recoloreado. */
@media (max-width: 640px) {
  .gar-hero { height: auto !important; min-height: 0 !important; }
  .gar-hero picture { display: block; }
  .gar-hero .gar-hero-img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }
  .gar-hero-bottom {
    position: static !important;
    padding: 24px 24px 40px !important;
  }
  .gar-hero-bottom p {
    color: var(--foreground) !important;
    max-width: none;
  }
  .gar-hero-bottom a.bg-background {
    background: var(--foreground) !important;
    color: var(--background) !important;
  }
  .gar-hero-bottom a.border-background {
    border-color: var(--foreground) !important;
    color: var(--foreground) !important;
  }
}

/* =====================================================================
   FICHAS DE TRATAMIENTO — dos propuestas de maquetación (rev-6, ago-2026)
   Esther: «mucho texto, mucho scroll, la foto pequeña a un lado y el
   texto al otro sin nada a la izquierda».
   styles.css es Tailwind compilado: todo esto se escribe a mano.
   ===================================================================== */

/* --- común a las dos propuestas --- */
.gar-texto { font-size: 1rem; line-height: 1.7; }
.gar-texto > * + * { margin-top: 1.25rem; }
.gar-texto h2 { margin-top: 2.25rem; }

/* Datos clave (duración, recuperación…) extraídos del propio texto */
.gar-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 2.5rem;
  padding: 1.25rem 0;
}
.gar-dato { flex: 1 1 220px; padding: .35rem 0; }
.gar-dato span { color: var(--muted-foreground); display: block; }
.gar-dato p { margin-top: .4rem; font-size: .95rem; line-height: 1.5; }

/* --- PROPUESTA A · editorial ------------------------------------- */
.gar-fa-hero {
  margin-top: 3rem;
  aspect-ratio: 16 / 9;
  border-radius: 9999px 9999px 0 0;
  overflow: hidden;
}
.gar-fa-hero img { object-position: 50% 28%; }
.gar-fa-cuerpo { margin-top: 4rem; }
/* medida de lectura: el texto deja de cruzar los 1.400 px de ancho */
.gar-fa-cuerpo > * { max-width: 74ch; margin-left: auto; margin-right: auto; }
/* Las listas de «Beneficios / Recomendado / No recomendado» son cortas de
   línea y muy altas: a dos columnas ocupan la mitad y no alargan el scroll. */
@media (min-width: 1024px) {
  .gar-fa-cuerpo .gar-texto ul { columns: 2; column-gap: 3rem; }
  .gar-fa-cuerpo .gar-texto ul > li { break-inside: avoid; }
}
@media (max-width: 640px) {
  .gar-fa-hero { aspect-ratio: 4 / 5; border-radius: 9999px 9999px 0 0; }
}

/* --- MAQUETA DE FICHA · compacta (la «propuesta B» elegida) --------
   Esther, 4-ago: «Opción B, pero con la foto más grande, ahora es muy
   pequeña». Tenía razón y el motivo era un detalle de CSS: la foto llevaba
   `aspect-ratio: 4/5` + `max-height: 44vh`, y cuando el alto topa con el
   máximo el navegador ENCOGE TAMBIÉN EL ANCHO para respetar la proporción.
   Resultado: una foto de 380 px dentro de una columna de 523, con un hueco
   en blanco al lado. Ahora la foto ocupa TODO el ancho de su columna y sólo
   cede alto (recortando, no deformando) si no cabe en pantalla. */
.gar-fb-grid { margin-top: 3.5rem; display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  /* OJO: nada de `align-items: start`. Con eso la columna mide lo que mide su
     contenido y el sticky se queda SIN RECORRIDO (no se pega, se va con el
     scroll). Estirada a la altura de la fila, sí funciona. */
  .gar-fb-grid { grid-template-columns: 6fr 7fr; gap: 4rem; }
  .gar-fb-lado { height: 100%; }
  /* El bloque pegajoso tiene que caber en pantalla: si es más alto que la
     ventana, el navegador no puede pegarlo. Se limita el CONJUNTO (foto +
     datos + «Pedir cita») y se deja que la foto sea la que ceda. */
  .gar-fb-sticky {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 7rem);
    display: flex;
    flex-direction: column;
  }
  /* `0 1 auto` = puede encoger, nunca crecer: así en una ficha corta la foto
     se queda en su 4/5 natural en lugar de estirarse media pantalla. */
  .gar-fb-foto { flex: 0 1 auto; min-height: 18rem; }
  .gar-fb-sticky > .gar-datos,
  .gar-fb-sticky > .gar-fb-cta { flex: 0 0 auto; }
  /* el botón es una píldora: como hijo de un flex se estiraría a todo el ancho */
  .gar-fb-sticky > .gar-fb-cta { align-self: flex-start; }
}
.gar-fb-foto { aspect-ratio: 4 / 5; }
/* Fichas que todavía son un «muy pronto»: tres líneas de texto no aguantan
   una foto de pantalla entera al lado, así que ahí el bloque se limita. */
@media (min-width: 1024px) {
  .gar-fb-corta .gar-fb-sticky { max-height: 30rem; }
}
/* Al recortar en apaisado, encuadre alto: en un retrato la cara está arriba */
.gar-fb-foto img { object-position: 50% 32%; }
.gar-fb-cta { margin-top: 2rem; }
.gar-fb-texto > * + * { margin-top: 1.5rem; }

/* Bloques plegables: el mismo contenido ocupando mucho menos alto.
   El indicador +/- lo pone ya `main details > summary::after` (arriba), que es
   el mismo que usan las FAQ: no se inventa aquí otro distinto. */
.gar-acc { border-top: 1px solid var(--border); }
.gar-acc > summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.5rem 1.1rem 0;
}
.gar-acc > summary::-webkit-details-marker { display: none; }
.gar-acc > summary::marker { content: ""; }
.gar-acc > summary::after { top: 1.3rem; }
.gar-acc > div { padding-bottom: 1.5rem; }
/* En la columna lateral (estrecha) los datos van uno bajo otro */
.gar-fb-sticky .gar-dato { flex: 1 1 100%; }