/* ==========================================================================
   Elevé · Psicología Premium — Hoja de estilos global
   ========================================================================== */

:root {
  /* Paleta de marca */
  --color-primary: #1B3B2F;      /* Verde oscuro */
  --color-accent: #B8963E;       /* Dorado / mostaza */
  --color-bg: #F6EFE3;           /* Crema / beige */
  --color-surface: #FCFAF5;      /* Blanco hueso */
  --color-text: #2E332F;         /* Texto body */
  --color-text-soft: #5A6058;
  --color-border: #E4D8BF;

  /* Tipografía */
  --font-heading: 'Playfair Display', 'Cormorant Garamond', serif;
  --font-label: 'Montserrat', 'Poppins', sans-serif;
  --font-body: 'Poppins', 'Inter', sans-serif;

  /* Espaciado y forma */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --container-width: 1180px;
  --shadow-soft: 0 10px 40px rgba(27, 59, 47, 0.08);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 600;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }

p { margin: 0 0 1em; color: var(--color-text); }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 96px 0;
}

.section--tight {
  padding: 64px 0;
}

.section--surface {
  background-color: var(--color-surface);
}

.section--primary {
  background-color: var(--color-primary);
  color: var(--color-surface);
}

.section--primary h1,
.section--primary h2,
.section--primary h3 {
  color: var(--color-surface);
}

/* ---------- Etiquetas / eyebrows ---------- */
.eyebrow {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--color-accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1em;
}

.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
}

.quote-text {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--color-primary);
  text-align: center;
  max-width: 640px;
  margin: 48px auto 0;
}

/* ---------- Misión y visión, apiladas de arriba a abajo ---------- */
.vision-mision-stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}

.vision-mision-col {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-border);
}

.vision-mision-col:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.vision-mision-title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--color-primary);
  margin-bottom: 16px;
}

.vision-mision-col p {
  margin: 0;
  text-align: justify;
}

/* ---------- Separador de hoja dorada ---------- */
.leaf-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px auto 0;
  color: var(--color-accent);
}

.leaf-divider::before,
.leaf-divider::after {
  content: "";
  height: 1px;
  width: 48px;
  background: var(--color-accent);
  opacity: 0.6;
}

.leaf-divider svg {
  width: 18px;
  height: 18px;
}

.leaf-divider--left {
  justify-content: flex-start;
}

.leaf-divider--left::after {
  display: none;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  padding: 16px 32px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-surface);
  box-shadow: 0 12px 30px rgba(184, 150, 62, 0.35);
}

.btn-primary:hover {
  background-color: #a58432;
}

.btn-outline {
  background-color: rgba(252, 250, 245, 0.12);
  border-color: var(--color-surface);
  color: var(--color-surface);
}

.btn-outline:hover {
  background-color: var(--color-surface);
  color: var(--color-primary);
}

.btn-outline-dark {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline-dark:hover {
  background-color: var(--color-primary);
  color: var(--color-surface);
}

.btn-whatsapp {
  background-color: #1B3B2F;
  color: var(--color-surface);
}

.btn-whatsapp:hover {
  background-color: #142d23;
}

/* ---------- Header / navegación ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(246, 239, 227, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 3.3px; /* 5% de los 66px del logo */
  padding-bottom: 3.3px; /* 5% de los 66px del logo */
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo-img {
  height: 66px; /* 110px - 40% */
  width: auto;
  display: block;
}

.footer-logo-chip {
  display: inline-flex;
  background-color: var(--color-surface);
  padding: 10px 18px;
  border-radius: var(--radius-md);
}

.footer-logo-img {
  height: 96px;
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.hero-actions-inline {
  display: flex;
  align-items: center;
  gap: 14px;
}

.main-nav ul {
  display: flex;
  gap: 30px;
}

.main-nav ul a {
  font-family: var(--font-label);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text);
  position: relative;
  padding-bottom: 4px;
}

.main-nav ul a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background-color: var(--color-accent);
  transition: width 0.25s ease;
}

.main-nav ul a:hover::after,
.main-nav ul a.is-active::after {
  width: 100%;
}

.main-nav ul a.is-active {
  color: var(--color-primary);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background-color: var(--color-primary);
  display: block;
}

/* ---------- Banner de disponibilidad (portada) ---------- */
.availability-banner {
  background-color: var(--color-primary);
  color: var(--color-surface);
  padding: 12px 0;
}

.availability-banner .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  text-align: center;
}

.availability-banner-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-size: 0.84rem;
  letter-spacing: 0.01em;
}

.availability-banner-text svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.availability-banner-link {
  color: var(--color-accent);
  font-weight: 700;
  font-family: var(--font-label);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.availability-banner-link:hover {
  color: var(--color-surface);
}

/* ---------- Hero ---------- */
.hero,
.page-hero {
  position: relative;
  background: linear-gradient(160deg, var(--color-primary) 0%, #14291f 100%);
  color: var(--color-surface);
  overflow: hidden;
  padding: 120px 0 100px;
  min-height: 620px;
  display: flex;
  align-items: center;
}

.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(184, 150, 62, 0.18), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(184, 150, 62, 0.14), transparent 45%);
  pointer-events: none;
}

/* Portada fotográfica: se ve la foto real, con un velo neutro (no verde) solo
   para que el texto siga siendo legible encima. */
.page-hero--photo {
  background-image:
    linear-gradient(180deg, rgba(8, 10, 9, 0.32) 0%, rgba(8, 10, 9, 0.58) 100%),
    var(--hero-photo);
  background-size: cover;
  background-position: center;
}

.page-hero--photo::before {
  display: none;
}

.page-hero--photo .breadcrumb,
.page-hero--photo h1,
.page-hero--photo p,
.page-hero--photo .hero-eyebrow {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero .container,
.page-hero .container {
  position: relative;
  text-align: center;
  max-width: 820px;
}

.hero-eyebrow {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.85rem;
  color: var(--color-accent);
  margin-bottom: 18px;
}

.hero h1 {
  color: var(--color-surface);
  margin-bottom: 20px;
}

.hero h1 em {
  color: var(--color-accent);
  font-style: italic;
}

.hero-lead {
  font-size: 1.15rem;
  color: rgba(252, 250, 245, 0.85);
  max-width: 620px;
  margin: 0 auto 40px;
}

.hero-actions {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Tarjetas ---------- */
.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(27, 59, 47, 0.14);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-bg);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.card-icon svg {
  width: 24px;
  height: 24px;
}

.grid {
  display: grid;
  gap: 32px;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Servicios ---------- */
.service-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

a.service-card {
  display: flex;
}

.service-card-body {
  padding: 32px 32px 36px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
}

.service-link svg {
  width: 16px;
  height: 16px;
}

.service-card-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.nav-login-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--color-text-soft);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.nav-login-icon svg {
  width: 17px;
  height: 17px;
}

.nav-login-icon:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: var(--color-surface);
}

.service-detail {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  align-items: stretch;
}

.service-detail-aside {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 24px;
}

.service-detail-aside .hero-actions {
  margin-top: auto;
}

.service-detail-aside h3 {
  margin-bottom: 12px;
}

@media (max-width: 860px) {
  .service-detail {
    grid-template-columns: 1fr;
  }
  .service-detail-aside {
    position: static;
  }
}

.service-card--featured {
  border-color: var(--color-accent);
  position: relative;
}

.service-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  background-color: var(--color-accent);
  color: var(--color-surface);
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.service-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.service-price {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--color-primary);
  font-weight: 700;
}

.service-price-note {
  display: block;
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  font-weight: 500;
}

.service-duration {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
}

/* ---------- Equipo ---------- */
.team-summary {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.team-summary p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 28px;
  text-align: justify;
}

.team-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.team-tag {
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-primary);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 10px 20px;
  border-radius: 999px;
}

/* ---------- Reseñas de clientes ---------- */
.testimonial-card {
  display: flex;
  flex-direction: column;
}

.testimonial-stars {
  display: flex;
  gap: 4px;
  color: var(--color-accent);
  margin-bottom: 16px;
}

.testimonial-stars svg {
  width: 16px;
  height: 16px;
}

.testimonial-quote-icon {
  width: 28px;
  height: 28px;
  color: var(--color-border);
  margin-bottom: 12px;
}

.testimonial-text {
  font-style: italic;
  color: var(--color-text);
  flex-grow: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

.testimonial-text.is-expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.testimonial-toggle {
  align-self: flex-start;
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-accent);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
}

.testimonial-toggle[hidden] {
  display: none;
}

.testimonial-author {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.testimonial-name {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary);
}

.testimonial-relation {
  display: block;
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-top: 2px;
}

.testimonial-professional {
  display: block;
  font-family: var(--font-label);
  font-size: 0.72rem;
  color: var(--color-accent);
  font-weight: 600;
  margin-top: 6px;
}

.testimonial-carousel {
  overflow-x: hidden;
  overflow-y: visible;
  /* Deja deslizar los testimonios con el dedo sin trabar el scroll vertical de la página. */
  touch-action: pan-y;
}

.testimonial-track {
  display: flex;
  align-items: stretch;
  gap: 32px;
  transition: transform 0.6s ease;
}

.testimonial-slide {
  flex: 0 0 calc((100% - 64px) / 3);
  min-width: 0;
}

.testimonial-slide .card {
  height: 100%;
}

/* Al abrir "Leer más" esa tarjeta deja de compartir la altura pareja de la fila
   (si no, el texto completo quedaría oculto por el overflow del carrusel). */
.testimonial-slide.is-expanded {
  align-self: flex-start;
}

.testimonial-slide.is-expanded .card {
  height: auto;
}

.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}

.testimonial-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: transparent;
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.testimonial-arrow svg {
  width: 18px;
  height: 18px;
}

.testimonial-arrow--prev svg {
  transform: scaleX(-1);
}

.testimonial-arrow:hover {
  background-color: var(--color-bg);
  border-color: var(--color-accent);
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.testimonial-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background-color: var(--color-border);
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.testimonial-dot.is-active {
  background-color: var(--color-accent);
  transform: scale(1.2);
}

@media (max-width: 960px) {
  .testimonial-slide {
    flex-basis: calc((100% - 32px) / 2);
  }
}

@media (max-width: 640px) {
  .testimonial-slide {
    flex-basis: 100%;
  }

  /* Un texto largo en un botón (ej. "Completar consentimiento informado") se
     cortaba en vez de acomodarse, porque .btn tiene white-space: nowrap para
     que en pantallas grandes nunca se vea partido a la mitad. En celular ya no
     hay espacio para eso, así que aquí se permite que el texto pase a una
     segunda línea en vez de desbordarse fuera de la tarjeta. */
  .btn {
    white-space: normal;
    text-align: center;
  }

  /* Los botones sueltos dentro de una tarjeta de contenido (ej. la confirmación
     de una cita) se ven mejor ocupando todo el ancho en celular, en vez de con
     su ancho automático de escritorio. No aplica al panel admin (.admin-card),
     donde varios botones suelen ir uno junto a otro. */
  .card .btn {
    width: 100%;
  }
}

/* ---------- Blog ---------- */
.empty-state {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  padding: 60px 32px;
}

.empty-state-icon {
  width: 56px;
  height: 56px;
  color: var(--color-accent);
  margin: 0 auto 24px;
}

/* ---------- Contacto ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}

.contact-info-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  margin-bottom: 18px;
}

.contact-info-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--color-bg);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info-icon svg {
  width: 20px;
  height: 20px;
}

.contact-info-card h3 {
  margin-bottom: 4px;
  font-size: 1.1rem;
}

.contact-info-card p {
  margin: 0;
  color: var(--color-text-soft);
}

.contact-info-card a.whatsapp-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
}

/* Formulario */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 8px;
}

.form-control {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-accent);
  background-color: var(--color-surface);
}

textarea.form-control {
  resize: vertical;
  min-height: 140px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Sub-bloque agrupado dentro de un formulario más grande (ej. datos del acudiente),
   para que se vea como una sección propia en vez de amontonarse con el resto. */
.form-subsection {
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  margin-bottom: 20px;
}

.form-subsection-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.form-subsection .form-group:last-child {
  margin-bottom: 0;
}

.form-check label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text-soft);
  cursor: pointer;
}

.form-check input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 8px 0 4px;
}

.radio-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text-soft);
  cursor: pointer;
}

.radio-inline input[type="radio"] {
  cursor: pointer;
}

.consent-modal-trigger {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
}

.consent-modal-trigger:hover {
  color: var(--color-accent);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(27, 59, 47, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-box {
  position: relative;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  padding: 40px 32px 28px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}

/* En pantallas de computador hay espacio de sobra: una ventana de 640px se ve
   pequeña y perdida en medio de la pantalla para un documento largo como este.
   Se amplía el ancho y el alto disponibles solo a partir de tablet/desktop. */
@media (min-width: 720px) {
  .modal-box {
    max-width: 820px;
    max-height: 88vh;
    padding: 48px 56px 32px;
  }
}

@media (min-width: 1100px) {
  .modal-box {
    max-width: 900px;
  }
}

.modal-box h3 {
  margin-bottom: 16px;
  padding-right: 24px;
}

.modal-body {
  overflow-y: auto;
  padding-right: 16px;
  margin-bottom: 20px;
  line-height: 1.75;
}

.modal-body p,
.modal-body ul,
.modal-body ol {
  max-width: 68ch;
}

.modal-body h3 {
  font-size: 1.15rem;
  margin-top: 1.5em;
}

.modal-body h3:first-child {
  margin-top: 0;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 24px;
  border: none;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-text-soft);
  cursor: pointer;
}

.modal-close:hover {
  color: var(--color-primary);
}

.slots-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.slot-btn {
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.slot-btn:hover {
  border-color: var(--color-accent);
}

.slot-btn.is-selected {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-surface);
}

.form-note {
  font-size: 0.8rem;
  color: var(--color-text-soft);
  margin-top: 12px;
}

.alert {
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
  font-size: 0.92rem;
}

.alert-success {
  background-color: #E4EEE8;
  color: var(--color-primary);
  border: 1px solid #b9d2c2;
}

.alert-error {
  background-color: #F6E4E1;
  color: #7a2e21;
  border: 1px solid #e3b8b0;
}

.alert-info {
  background-color: #FBF3E1;
  color: #7a5b1e;
  border: 1px solid #eddab0;
}

.reagendar-box-activo {
  background-color: #FBF3E1 !important;
  border: 2px solid #B8963E !important;
}

/* honeypot field, oculto a usuarios reales */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Mapa embebido ---------- */
.map-embed {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin-top: 12px;
}

.map-embed iframe {
  width: 100%;
  height: 220px;
  border: 0;
  display: block;
}

/* ---------- WhatsApp flotante ---------- */
.floating-actions {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 14px;
}

.whatsapp-float {
  background-color: var(--color-primary);
  color: var(--color-surface);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(27, 59, 47, 0.35);
  transition: transform 0.25s ease;
}

.whatsapp-float:hover {
  transform: scale(1.08);
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
}

.back-to-top {
  background-color: var(--color-surface);
  color: var(--color-primary);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(27, 59, 47, 0.18);
  transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: scale(1.08);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 640px) {
  .floating-actions {
    bottom: 16px;
    right: 16px;
    gap: 10px;
  }

  .back-to-top {
    width: 42px;
    height: 42px;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  background-color: var(--color-primary);
  color: rgba(252, 250, 245, 0.82);
  padding: 72px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

.footer-brand p {
  color: rgba(252, 250, 245, 0.7);
  margin-top: 16px;
  max-width: 320px;
}

.footer-heading {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 18px;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: rgba(252, 250, 245, 0.78);
  font-size: 0.92rem;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--color-accent);
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a,
.footer-social span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(252, 250, 245, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.footer-social a:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.footer-social svg {
  width: 16px;
  height: 16px;
}

.footer-bottom {
  border-top: 1px solid rgba(252, 250, 245, 0.15);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(252, 250, 245, 0.6);
}

/* ---------- Utilidades ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Página interior: mismo tamaño de panel que el hero de inicio */
.page-hero h1 {
  color: var(--color-surface);
}

.page-hero p {
  color: rgba(252, 250, 245, 0.82);
  max-width: 560px;
  margin: 0 auto;
}

.breadcrumb {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Foto del hero de Inicio: en celular, mostrar el tercio derecho de la foto
   (donde está la persona) en vez del centro, para que no se recorte de más. */
@media (max-width: 640px) {
  .hero.page-hero--photo {
    background-position: 80% center;
  }

  /* Los botones flotantes (WhatsApp + volver arriba) son fijos y quedan siempre en
     la esquina inferior derecha; sin este espacio extra, el texto final del footer
     (el enlace a la política de datos y la ciudad) queda tapado detrás de ellos y
     no se puede ni leer ni tocar al llegar al final de la página en celular. */
  .site-footer {
    padding-bottom: 96px;
  }
}

@media (max-width: 720px) {
  .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
  }

  .main-nav {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    transform: translateY(-130%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    gap: 0;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }

  .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
  }

  .main-nav .hero-actions-inline {
    padding: 4px 24px 24px;
    justify-content: flex-start;
  }

  .nav-toggle {
    display: flex;
  }

  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .section { padding: 64px 0; }
  .hero, .page-hero { padding: 96px 0 72px; min-height: auto; }
}

/* ---------- Líneas de emergencia ---------- */
.footer-emergencia {
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1px solid rgba(184, 150, 62, 0.55);
  border-radius: var(--radius-md, 12px);
  background-color: rgba(184, 150, 62, 0.12);
  color: rgba(252, 250, 245, 0.9);
  font-size: 0.88rem;
  line-height: 1.6;
}
.footer-emergencia strong { color: #FCFAF5; margin-right: 4px; }
.footer-emergencia a { color: #E8C978; font-weight: 600; text-decoration: underline; white-space: nowrap; }

.emergencia-aviso {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-left: 4px solid var(--color-accent);
  border-radius: 8px;
  background-color: var(--color-bg);
  font-size: 0.9rem;
  color: var(--color-text);
}
.emergencia-aviso a { color: var(--color-primary); font-weight: 600; white-space: nowrap; }

/* ---------- Casilla de autorización de datos (formularios públicos) ---------- */
.form-check-autorizacion label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.88rem;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--color-text);
}
.form-check-autorizacion input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; }
.form-check-autorizacion a { color: var(--color-primary); font-weight: 600; text-decoration: underline; }

/* ---------- Botón enviando (evita doble envío) ---------- */
button[type="submit"].is-enviando,
.btn.is-enviando { opacity: 0.7; cursor: progress; pointer-events: none; }

/* ---------- Selector de fechas en español (flatpickr) ---------- */
.flatpickr-calendar { font-family: 'Poppins', Arial, sans-serif; border-radius: 12px; box-shadow: 0 10px 30px rgba(27, 59, 47, 0.18); }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--color-primary); fill: var(--color-primary); }
.flatpickr-current-month { font-size: 1rem; }
.flatpickr-day.selected, .flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--color-primary); border-color: var(--color-primary); color: #FCFAF5; }
.flatpickr-day.today { border-color: var(--color-accent); }
.flatpickr-day.today:hover { background: var(--color-accent); border-color: var(--color-accent); color: #FCFAF5; }
.flatpickr-day:hover { background: var(--color-bg); border-color: var(--color-border); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: rgba(46, 51, 47, 0.25); }
span.flatpickr-weekday { color: var(--color-text-soft); font-weight: 600; }
input.flatpickr-input[readonly] { cursor: pointer; background-color: inherit; }

/* ---------- Reserva: valor y forma de pago ---------- */
.pago-opciones { margin-bottom: 20px; }
.pago-opcion {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background-color: var(--color-surface);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pago-opcion:hover { border-color: var(--color-accent); }
.pago-opcion:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(27, 59, 47, 0.12); }
.pago-opcion input[type="radio"] { margin-top: 4px; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--color-primary); }
.pago-opcion strong { display: block; color: var(--color-primary); font-size: 0.98rem; }
.pago-opcion small { display: block; color: var(--color-text-soft); font-size: 0.85rem; margin-top: 2px; }
.pago-valor { font-family: 'Playfair Display', Georgia, serif; font-size: 1.6rem; color: var(--color-primary); margin: 0 0 6px; }
.pago-valor small { font-family: 'Poppins', Arial, sans-serif; font-size: 0.9rem; color: var(--color-text-soft); }

/* ---------- Resultado del pago ---------- */
.pago-resumen { margin-top: 18px; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.pago-resumen-fila { display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; }
.pago-resumen-fila:last-child { border-bottom: none; }
.pago-resumen-fila span:first-child { color: var(--color-text-soft); }
.pago-resumen-fila span:last-child { text-align: right; font-weight: 500; color: var(--color-text); }

/* ---------- Política de devoluciones (Servicios; el texto se escribe en Ajustes) ---------- */
.politica-devoluciones {
  max-width: 820px;
  margin: 56px auto 0;
  padding: 40px 44px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  scroll-margin-top: 120px;
}

.politica-devoluciones h2 {
  margin-bottom: 18px;
}

.politica-devoluciones-texto p {
  color: var(--color-text-soft);
  line-height: 1.75;
  margin: 0 0 14px;
}

.politica-devoluciones-texto p:last-child {
  margin-bottom: 0;
}

.politica-devoluciones-texto h3 {
  font-size: 1.15rem;
  color: var(--color-primary);
  margin: 26px 0 8px;
}

.politica-devoluciones-texto ul {
  margin: 0 0 14px;
  padding-left: 22px;
  list-style: disc;
}

.politica-devoluciones-texto li {
  color: var(--color-text-soft);
  line-height: 1.7;
  margin-bottom: 8px;
}

.politica-devoluciones-texto li::marker {
  color: var(--color-accent);
}

.politica-detalle {
  margin-top: 6px;
}

.politica-detalle summary,
.politica-cerrar {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding: 10px 0;
  background: none;
  border: 0;
}

.politica-detalle summary::-webkit-details-marker {
  display: none;
}

.politica-detalle summary svg,
.politica-cerrar svg {
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
}

/* Abierta: el botón de arriba se esconde y "Ver menos" queda al final. */
.politica-detalle[open] > summary {
  display: none;
}

.politica-cerrar {
  margin-top: 10px;
}

.politica-cerrar svg {
  transform: rotate(-90deg);
}

@media (max-width: 640px) {
  .politica-devoluciones {
    margin-top: 40px;
    padding: 28px 20px;
  }
}


/* ---------- Pantallas táctiles (celulares y tablets Android) ----------
   Menú, botones y enlaces con área de al menos ~44 px para el dedo (Google recomienda
   48dp). En el computador (mouse) todo se ve igual que antes. */
@media (pointer: coarse) {
  .nav-toggle { min-width: 48px; min-height: 48px; align-items: center; justify-content: center; }
  .main-nav ul a { display: inline-block; padding-top: 12px; padding-bottom: 12px; }
  .main-nav ul a::after { bottom: 8px; }
  .btn { min-height: 44px; }
  .testimonial-arrow { width: 44px; height: 44px; }
  /* El punto se ve igual (9 px), pero se puede tocar en un área de ~29 px. */
  .testimonial-dot { box-sizing: content-box; border: 10px solid transparent; background-clip: padding-box; }
  .testimonial-dots { gap: 0; }
  .testimonial-toggle { padding-top: 14px; padding-bottom: 14px; margin-top: 0; }
  .politica-detalle summary, .politica-cerrar { min-height: 44px; }
  a, button, summary, label { -webkit-tap-highlight-color: rgba(184, 150, 62, 0.2); }
}

/* ==========================================================================
   Celular vertical: diseño compacto (pedido por Elevé el 2026-10-06)
   Todo lo de aquí abajo solo cambia el ASPECTO en pantallas de hasta 640 px de
   ancho: letra y espacios proporcionados al celular, tarjetas de servicio en
   horizontal (foto pequeña a la izquierda) y pie de página en dos columnas, para
   que la información se vea compacta y fácil de leer. No cambia ningún contenido
   ni funcionalidad; en el computador todo se ve igual que antes.
   ========================================================================== */

/* Íconos dentro de botones con tamaño fijo: sin esto el SVG salía a su tamaño por
   defecto y el botón se veía gigante (ej. "Escríbenos por WhatsApp", "Agenda tu cita"). */
.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  body { font-size: 15px; line-height: 1.6; }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.45rem; }
  h3 { font-size: 1.1rem; }
  p { margin-bottom: 0.8em; }

  .container { padding: 0 16px; }
  .section { padding: 40px 0; }
  .section--tight { padding: 32px 0; }
  .section-head { margin-bottom: 22px; }
  .eyebrow { font-size: 0.66rem; letter-spacing: 0.14em; margin-bottom: 0.5em; }
  .leaf-divider { margin-top: 8px; }
  .leaf-divider svg { width: 14px; height: 14px; }
  .leaf-divider::before, .leaf-divider::after { width: 32px; }
  .grid { gap: 12px; }
  .quote-text { font-size: 1.05rem; margin-top: 24px; }

  /* Tarjetas: menos relleno y sin el "salto" al tocarlas */
  .card { padding: 20px 18px; border-radius: 18px; }
  .card:hover { transform: none; }
  .card-icon { width: 38px; height: 38px; margin-bottom: 10px; }
  .card-icon svg { width: 19px; height: 19px; }

  /* Tarjeta con ícono (ej. "Dificultades que abordamos"): ícono al lado del título */
  .card:has(> .card-icon:first-child) {
    display: grid;
    grid-template-columns: 38px 1fr;
    column-gap: 12px;
    align-items: center;
    text-align: left;
  }
  .card:has(> .card-icon:first-child) > .card-icon { margin: 0; }
  .card:has(> .card-icon:first-child) > h3 { margin: 0; }
  .card:has(> .card-icon:first-child) > :not(.card-icon):not(h3) { grid-column: 1 / -1; margin-top: 8px; }
  .card:has(> .card-icon:first-child) p { font-size: 0.86rem; margin-bottom: 0; }

  /* Botones proporcionados al celular */
  .btn { padding: 13px 22px; font-size: 0.72rem; letter-spacing: 0.06em; gap: 8px; }
  .btn svg { width: 16px; height: 16px; }
  .hero-actions { gap: 10px; }

  /* Encabezado más bajo (el menú desplegable se acomoda a esa altura) */
  .brand-logo-img { height: 46px; }
  .site-header .container { padding-top: 5px; padding-bottom: 5px; }
  .main-nav { top: 56px; max-height: calc(100vh - 56px); }
  .main-nav ul { gap: 4px; padding: 16px 20px; }

  /* Portadas (hero) más cortas */
  .hero, .page-hero { padding: 52px 0 40px; }
  .hero-eyebrow { font-size: 0.66rem; letter-spacing: 0.2em; margin-bottom: 10px; }
  .hero h1, .page-hero h1 { margin-bottom: 12px; }
  .hero-lead { font-size: 0.95rem; margin-bottom: 22px; }
  .page-hero p { font-size: 0.92rem; }

  /* Portadas con foto: la foto se ve clara y grande arriba, y el texto va abajo sobre
     una sombra suave solo en la parte de abajo (antes toda la foto salía oscurecida y
     tapada por el texto). Solo en las portadas que llevan --hero-foco (Inicio, Servicios,
     Nosotros, Blog y Contacto), que es donde cada página encuadra su foto donde está la
     persona; Reservar, el detalle de un servicio y el resultado del pago la dejan compacta. */
  .hero.page-hero--photo[style*="--hero-foco"],
  .page-hero.page-hero--photo[style*="--hero-foco"] {
    background-image:
      linear-gradient(180deg, rgba(8, 10, 9, 0) 28%, rgba(8, 10, 9, 0.38) 56%, rgba(8, 10, 9, 0.86) 100%),
      var(--hero-photo);
    background-position: var(--hero-foco, center);
    align-items: flex-end;
    min-height: 60vh;
    min-height: 60svh;
    padding: 0 0 26px;
  }
  .hero.page-hero--photo[style*="--hero-foco"] {
    min-height: 76vh;
    min-height: 76svh;
    padding-bottom: 30px;
  }
  .page-hero--photo[style*="--hero-foco"] .container { padding-top: 120px; }
  .page-hero--photo[style*="--hero-foco"] .breadcrumb,
  .page-hero--photo[style*="--hero-foco"] .hero-eyebrow { margin-bottom: 6px; }
  .page-hero--photo[style*="--hero-foco"] h1 { font-size: 1.75rem; margin-bottom: 8px; }
  .page-hero--photo[style*="--hero-foco"] .hero-lead { font-size: 0.9rem; line-height: 1.55; margin-bottom: 18px; }
  .availability-banner { padding: 8px 0; }
  .availability-banner .container { gap: 6px 14px; }
  .availability-banner-text { font-size: 0.74rem; }
  .availability-banner-link { font-size: 0.7rem; }

  /* Servicios: tarjeta horizontal, foto pequeña a la izquierda y el texto al lado.
     Antes cada servicio ocupaba casi una pantalla entera (foto grande arriba). */
  .service-card,
  a.service-card {
    flex-direction: row;
    align-items: stretch;
    border-radius: 16px;
    height: auto;
  }
  .service-card-image {
    width: 104px;
    height: auto;
    min-height: 100%;
    object-fit: cover;
  }
  /* MBCT: en la foto angosta se encuadra al paciente que hace la respiración consciente
     (al centro solo quedaba el espacio vacío entre las dos personas). */
  .service-card-image[src*="terapia_cognitiva"] { object-position: 80% center; }
  .service-card-body { padding: 14px 14px 12px; min-width: 0; }
  .service-card-body .card-icon { margin-bottom: 8px; }
  .service-card-body h3 { font-size: 1rem; margin-bottom: 4px; }
  .service-card-body p {
    font-size: 0.82rem;
    line-height: 1.45;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .service-meta { padding-top: 8px; }
  .service-link { font-size: 0.66rem; }
  .service-link svg { width: 13px; height: 13px; }
  .service-badge { top: 8px; left: 8px; right: auto; font-size: 0.52rem; padding: 3px 8px; letter-spacing: 0.06em; }

  /* Equipo y enfoques (Inicio / Nosotros): texto sin justificar (en pantalla angosta
     dejaba huecos grandes entre palabras) y etiquetas pequeñas, varias por renglón. */
  .team-summary p { font-size: 0.92rem; line-height: 1.65; text-align: left; margin-bottom: 16px; }
  .team-tags { gap: 6px; }
  .team-tags[style] { margin-top: 10px !important; }
  .team-tag { font-size: 0.58rem; padding: 5px 10px; letter-spacing: 0.02em; }

  /* Misión / visión */
  .vision-mision-stack { gap: 22px; margin-bottom: 32px; }
  .vision-mision-col { padding-bottom: 22px; }
  .vision-mision-title { font-size: 1.3rem; margin-bottom: 8px; }
  .vision-mision-col p { font-size: 0.9rem; text-align: left; }

  /* Pie de página: marca arriba y las listas en dos columnas */
  .site-footer { padding: 36px 0 96px; font-size: 0.85rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; margin-bottom: 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { margin-top: 10px; font-size: 0.85rem; }
  .footer-logo-img { height: 60px; }
  .footer-heading { font-size: 0.66rem; margin-bottom: 10px; }
  .footer-links li { margin-bottom: 6px; }
  .footer-links a { font-size: 0.84rem; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-emergencia { font-size: 0.8rem; padding: 12px 14px; }
  .footer-bottom { font-size: 0.74rem; padding-top: 16px; }
}