/* paginas.css — lo que esta web añade sobre base.css (del generador): menú y botón de
   reserva en la cabecera, páginas interiores (servicios, cómo trabajo, preguntas, legales),
   Clínica SER en «Sobre mí», precios, pasos, widgets de Doctoralia con aviso de cookies,
   el teléfono en ordenador y el mapa que se carga al pulsar. */

/* ---------- Cabecera: menú, Llamar y Reservar cita ---------- */
.nav-menu {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-2); color: inherit; flex: none;
}
.nav-menu svg { width: 22px; height: 22px; }
.nav-right { display: flex; align-items: center; gap: .6rem; }
.nav-reservar { min-height: 42px; padding: 0 1rem; white-space: nowrap; }
.nav-reservar svg { width: 16px; height: 16px; }
.nav-links a[aria-current="page"] { font-weight: 600; }
@media (max-width: 959px) {
  .nav-call { display: none; } /* en móvil, «Llamar» va en la barra de abajo */
  .brand { font-size: 1.05rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.menu-abierto .site-header { background: var(--bg); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
  body.menu-abierto .nav-links {
    display: grid; gap: .25rem; position: absolute; left: 0; right: 0; top: 100%;
    padding: .75rem var(--gutter) 1.25rem; background: var(--bg); border-bottom: 1px solid var(--line);
    font-size: 1.05rem;
  }
  body.menu-abierto .nav-link { padding: .55rem 0; border-bottom: 1px solid var(--line); }
  body.menu-abierto .nav-link::after { display: none; }
}
@media (max-width: 419px) { .nav-reservar { padding: 0 .75rem; font-size: .875rem; } }
@media (min-width: 960px) { .nav-menu { display: none; } }
.nav .nav-links { position: relative; }
.site-header .nav { position: relative; }

/* ---------- Portada: línea de Clínica SER y confianza ---------- */
.portada-extra { display: grid; gap: .5rem; margin-top: 1.4rem; font-size: .9375rem; color: var(--ink-mute); }
.portada-extra a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.estrellas { color: var(--accent-2); letter-spacing: .08em; }

/* ---------- Sobre mí: párrafos y Clínica SER (foto pequeña, informativa) ---------- */
.presentacion-text--sec { font-size: clamp(1.05rem, 1.5vw, 1.2rem); margin-top: 1rem; }
.sobre-ser {
  display: grid; gap: 1rem; align-items: center; margin: 1.4rem 0 .4rem;
  padding: 1.1rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line);
}
.sobre-ser__foto { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 2; }
.sobre-ser__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out); }
.sobre-ser__foto:hover img { transform: scale(1.03); }
.sobre-ser p { color: var(--ink-mute); font-size: .95rem; }
.sobre-ser a:not(.sobre-ser__foto) { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) { .sobre-ser { grid-template-columns: 11rem minmax(0, 1fr); } }
.dato-valor--email { font-size: clamp(.95rem, 1.4vw, 1.15rem); word-break: break-all; }

/* ---------- Precios ---------- */
.precios { list-style: none; display: grid; gap: .5rem; padding: 0; }
.precios li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.precios li span { color: var(--ink-soft); }
.precios li strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; white-space: nowrap; }
.precios-caja .precios { max-width: 40rem; margin-top: .6rem; }
.precios-caja .nota { margin-top: .8rem; font-size: .875rem; color: var(--ink-mute); }

/* ---------- Cómo trabajo: pasos ---------- */
.pasos { list-style: none; display: grid; gap: 1rem; padding: 0; max-width: 52rem; }
.paso {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start;
  padding: 1.3rem 1.4rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line);
}
.paso__num {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink); font-family: var(--serif); font-size: 1.2rem;
}
.paso h2, .paso h3 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; margin-bottom: .4rem; }
.paso p { color: var(--ink-soft); }
.paso p + p { margin-top: .5rem; }
.pasos--resumen { max-width: none; margin-top: 1.5rem; }
.pasos--resumen .paso h3 { font-size: 1.2rem; }
.pasos--resumen .paso p { font-size: .95rem; color: var(--ink-mute); }
@media (min-width: 720px) { .pasos--resumen { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.proceso { background: var(--bg); }
.proceso .lede .link-arrow { margin-top: .4rem; }

/* ---------- Páginas interiores ---------- */
.pagina-hero { padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 4.5rem)); padding-bottom: clamp(2rem, 5vw, 3.5rem); background: var(--bg); }
.pagina-hero .wrap { display: grid; gap: 1.2rem; max-width: 52rem; }
.pagina-hero h1 { font-family: var(--serif); font-weight: 330; font-size: clamp(2.3rem, 5.5vw, 4rem); letter-spacing: -0.02em; }
.pagina-hero h1 em { font-style: italic; color: var(--accent-ink); }
.pagina-hero .lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 42rem; }
.pagina-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .4rem; }
.migas { font-size: .8125rem; color: var(--ink-mute); display: flex; flex-wrap: wrap; gap: .4rem; }
.migas a { text-decoration: underline; text-underline-offset: 3px; }
.migas span[aria-hidden] { opacity: .6; }

.prosa { max-width: 44rem; display: grid; gap: 1.1rem; }
.prosa h2 { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 1rem; }
.prosa h2 em { font-style: italic; color: var(--accent-ink); }
.prosa h3 { font-family: var(--serif); font-size: 1.3rem; margin-top: .4rem; }
.prosa p, .prosa li { color: var(--ink-soft); }
.prosa ul:not(.precios) { padding-left: 1.2rem; display: grid; gap: .4rem; }
.prosa a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.prosa .nota { padding-left: .9rem; border-left: 2px solid var(--accent); }

.dos-columnas { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.dos-columnas > aside > figure img { border-radius: var(--radius-lg); width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.dos-columnas > aside > figure figcaption { font-size: .8125rem; color: var(--ink-mute); margin-top: .5rem; }
@media (min-width: 900px) {
  .dos-columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
}

.bloques { display: grid; gap: 1rem; margin-top: 1.5rem; }
.bloque {
  padding: 1.4rem 1.4rem 1.3rem; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--line);
}
.bloque h3 { font-family: var(--serif); font-size: 1.25rem; margin-bottom: .45rem; }
.bloque p, .bloque li { color: var(--ink-mute); font-size: .95rem; }
.bloque ul { padding-left: 1.1rem; display: grid; gap: .3rem; margin-top: .3rem; }
.bloque a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.bloque--acento { background: var(--accent-soft); border-color: transparent; }
@media (min-width: 720px) { .bloques { grid-template-columns: 1fr 1fr; } }

.lista-servicios { list-style: none; display: grid; gap: .75rem; margin-top: 1.5rem; }
.lista-servicios a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.2rem; border-radius: 14px; background: var(--paper); border: 1px solid var(--line);
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.lista-servicios a:hover { border-color: var(--accent); background: var(--accent-soft); }
.lista-servicios strong { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }
.lista-servicios small { color: var(--ink-mute); display: block; }
.lista-servicios a[aria-current="page"] { border-color: var(--accent-btn); }

.faq { max-width: 48rem; display: grid; gap: .6rem; margin-top: 1.5rem; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 0 1.2rem; }
.faq details[open] { border-color: var(--accent); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1rem 0; font-family: var(--serif); font-size: 1.15rem; line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.4rem; color: var(--accent-ink); transition: transform .3s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p, .faq details li { color: var(--ink-soft); padding-bottom: 1rem; }
.faq details p + p { margin-top: -.4rem; }
.faq details a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

.cta-final { background: var(--bg-2); }
.cta-final .wrap { display: grid; gap: 1.2rem; justify-items: start; max-width: 52rem; }
.cta-final .h2 { font-size: clamp(1.9rem, 4vw, 3rem); }

/* ---------- Botones que parecen enlaces ---------- */
button.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Widgets de Doctoralia (calendario y opiniones) ---------- */
.widget { display: grid; gap: 1rem; }
.widget-sin { display: grid; gap: .9rem; justify-items: start; }
.widget-sin p { color: var(--ink-mute); font-size: .95rem; }
.widget-sin .btn { min-height: 54px; }
.widget-sin__nota { font-size: .8125rem; }
.widget-doctoralia { width: 100%; min-height: 120px; }
.widget-doctoralia iframe { max-width: 100%; }
.widget--opiniones { margin: .4rem 0 .8rem; }
.widget--opiniones .widget-doctoralia { min-height: 0; }
.widget--opiniones .widget-doctoralia iframe { min-height: 240px; } /* el sello de opiniones mide unos 230 px; si Doctoralia no manda su alto, que no se corte */
.citas-card .widget { margin-top: .5rem; }

/* ---------- Aviso de cookies ---------- */
.cookies {
  position: fixed; left: max(.75rem, env(safe-area-inset-left)); right: max(.75rem, env(safe-area-inset-right));
  bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 120;
  display: grid; gap: .6rem; max-width: 34rem; margin: 0 auto; padding: 1.1rem 1.2rem;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .35);
}
.cookies[hidden] { display: none; }
.cookies__titulo { font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; }
.cookies__texto, .cookies__motivo { font-size: .875rem; color: var(--ink-mute); }
.cookies__motivo { color: var(--accent-ink); font-weight: 500; }
.cookies__texto a { color: var(--accent-ink); text-decoration: underline; }
.cookies__acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
@media (max-width: 959px) { .cookies { bottom: calc(5.2rem + env(safe-area-inset-bottom)); } } /* por encima de la barra fija */

/* ---------- Teléfono en ordenador: el número para copiarlo ---------- */
.tel-pop {
  position: fixed; top: calc(var(--header-h) + .5rem); left: 50%; transform: translateX(-50%); z-index: 130;
  display: grid; gap: .5rem; justify-items: center; padding: 1.1rem 1.4rem; min-width: min(22rem, calc(100vw - 2rem));
  background: var(--paper); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .35); text-align: center;
}
.tel-pop__kicker { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.tel-pop__num { font-family: var(--serif); font-size: 2rem; line-height: 1.1; user-select: all; }
.tel-pop__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .3rem; }

/* ---------- Barra fija (móvil): Llamar · WhatsApp · Reservar ---------- */
.barra-fija { grid-template-columns: 1fr 1fr 1fr; }
.barra-fija .btn { font-size: .9rem; padding: 0 .5rem; }

/* ---------- Mapa: fondo y botón hasta que se pulsa ---------- */
.map { position: relative; min-height: 320px; display: grid; place-items: center; background: var(--bg-2); text-align: center; padding: 1.5rem; }
.map--cargado { display: block; padding: 0; }
.map-aviso { display: grid; gap: .75rem; justify-items: center; max-width: 24rem; }
.map-aviso p { color: var(--ink-mute); font-size: .9375rem; }
.map-aviso small { font-size: .75rem; color: var(--ink-mute); }
.map-aviso small a { color: var(--accent-ink); text-decoration: underline; }

/* ---------- Legales ---------- */
.legal { max-width: 44rem; margin: 0 auto; padding: calc(var(--header-h) + 2.5rem) var(--gutter) clamp(2.5rem, 6vw, 5rem); display: grid; gap: 1.1rem; }
.legal h1 { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 330; }
.legal h1 em { font-style: italic; color: var(--accent-ink); }
.legal h2 { font-family: var(--serif); font-size: 1.45rem; margin-top: 1rem; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { padding-left: 1.2rem; display: grid; gap: .35rem; }
.legal a { color: var(--accent-ink); text-decoration: underline; }
.legal .pendiente { background: var(--accent-soft); padding: .9rem 1.1rem; border-radius: 12px; font-size: .9375rem; }

/* El pie en las páginas interiores no lleva créditos de fotos si no hay fotos de referencia */
.footer-credits:empty { display: none; }