/* =====================================================
   ÍNDICE CSS – HIPNOSIS PARA SANAR
   =====================================================
   01. RESET
   02. VARIABLES / COLORES
   03. BASE GLOBAL (body, tipografías, links, imágenes)
   04. LAYOUT GENERAL (container)
   05. HEADER
       05.1 Header base
       05.2 Header inner layout
       05.3 Logo (FIX logo grande)
       05.4 Navegación
       05.5 Dropdown
       05.6 Redes header
       05.8 Header mobile (menú hamburguesa + panel)
   06. BOTONES
   07. SECCIONES GENERALES
   08. HERO
   09. LAYOUT 2 COLUMNAS + ZIGZAG
   10. CAJAS / CARDS / GRID
   11. FAQ
   12. CTA FINAL
   13. FOOTER
   14. PÁGINAS: SOBRE MÍ
   15. PÁGINAS: TESTIMONIOS
   16. PÁGINAS: CONTACTO
   17. DESCUENTOS (cards)
   18. HISTORIAS DE TRANSFORMACIÓN
   19. VISIÓN / MISIÓN
   20. LO QUE DICEN...
   21. GRID CASOS RTT
   22. RTT PROGRAMAS (acordeón hombres/mujeres + imágenes + tipografías)
   23. RESPONSIVE (global)
   24. FIXES FINALES (casos / historias / que-es-rtt)
   25. UTILIDADES (centrado global)
   ===================================================== */


/* =====================================================
   01. RESET
   ===================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* =====================================================
   02. VARIABLES / COLORES
   ===================================================== */
:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;

  /* Color principal */
  --color-primary: #137F8F;
  --color-primary-soft: #DFF5F8;
  --color-primary-dark: #0da2b9;

  --color-accent: #7c3aed;

  /* charcoal */
  --color-text: #1F2933;
  --color-text-soft: #4B5563;

  --color-border: #E5E7EB;
  --color-footer-bg: #00768E;

  /* =========================
     HEADER / LOGO (IMPORTANTE)
     ========================= */
  --header-padding-y: 10px;
  --logo-max-h: 150px;      /* tamaño real del logo (desktop) */
  --logo-max-w: 420px;      /* ancho máximo del logo (desktop) */
  --logo-scale: 1.18;       /* agranda visualmente si el PNG tiene “aire” */
  --logo-scale-mobile: 1.06;

  --logo-max-h-mobile: 90px;
  --logo-max-w-mobile: 280px;
}


/* =====================================================
   03. BASE GLOBAL
   ===================================================== */
html,
body {
  height: 100%;
}

body {
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;

  /* para que el footer se pegue al fondo */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: "Raleway", sans-serif;
  color: var(--color-text);
}

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

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


/* =====================================================
   04. LAYOUT GENERAL
   ===================================================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}


/* =====================================================
   05. HEADER (Sticky + Background + Dropdown + Mobile)
   ===================================================== */

/* ---------- 05.1 Header base ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: #137F8F;
  /* OJO: si el archivo real se llama "headerbackground2.png", cámbialo */
  background-image: url("../img/haederbackground2.png");
  background-repeat: no-repeat;
  background-position: 0px -0px;
  background-size: cover;

  min-height: unset;
  border-bottom: 1px solid var(--color-border);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  overflow: visible; /* no recorta el dropdown */
}

/* ---------- 05.2 Header inner layout ---------- */
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: var(--header-padding-y) 0;

  position: relative;
  flex-wrap: nowrap;
}

/* ---------- 05.3 Logo (FIX logo grande real) ---------- */
.header-left{
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: visible; /* por si el scale sobresale */
}

.header-left .brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;

  transform-origin: left center;
  transform: scale(var(--logo-scale));
}

/* Tamaño real del logo */
.header-left img{
  max-height: var(--logo-max-h);
  max-width: var(--logo-max-w);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ---------- 05.4 Botón hamburguesa ---------- */
.menu-toggle{
  display: none; /* mobile */
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex: 0 0 auto;

  align-items: center;
  justify-content: center;
  gap: 5px;
}

.menu-toggle span{
  display: block;
  width: 20px;
  height: 2px;
  background: #ffffff;
  border-radius: 99px;
}

.menu-toggle:hover{
  background: rgba(255,255,255,0.18);
}

/* ---------- 05.5 Navegación (desktop) ---------- */
.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  z-index: 50;
}

.main-nav ul{
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item{ position: relative; }

.nav-link{
  border: none;
  background: transparent;
  padding: 6px 0;
  font: inherit;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.18s ease;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.active{
  opacity: 0.85;
  text-decoration: underline;
}

/* ---------- 05.6 Dropdown ---------- */
.dropdown-menu{
  position: absolute;
  top: calc(100% + 12px);
  left: 0;

  background: var(--color-surface);
  border-radius: 14px;
  border: 1px solid var(--color-border);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);

  min-width: 270px;
  padding: 6px;

  display: none;
  z-index: 9999;
}

/* ✅ dropdown SOLO por click (JS agrega .open al <li>) */
.nav-item.dropdown.open .dropdown-menu{ display: block; }

.dropdown-link{
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.9rem;
  color: var(--color-text-soft);
  text-decoration: none;
  white-space: nowrap;
}

.dropdown-link:hover{
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

/* Flecha SOLO cuando el dropdown está abierto (Terapias / Transformación) */
#btnTerapias::after,
#btnTransformacion::after{
  content: "";
}

.nav-item.dropdown.open > .nav-link::after{
  content: "▴";
  margin-left: 8px;
  font-size: 0.8rem;
  opacity: 0.9;
}

/* ---------- 05.7 Redes header ---------- */
.header-right{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  position: relative;
  z-index: 50;
}

.social-label{ color: #ffffff; }

.social-links{
  display: flex;
  gap: 8px;
}

.social-pill{
  border-radius: 999px;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,0.85);
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: background 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.social-pill i{
  font-size: 1rem;
  color: inherit;
}

.social-pill:hover{
  background: rgba(255,255,255,0.16);
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ---------- 05.8 Header mobile (menú hamburguesa + panel) ---------- */
@media (max-width: 900px){
  .site-header{
    background-position: center top;
    background-size: cover;
  }

  .header-left .brand{
    transform: scale(var(--logo-scale-mobile));
  }

  .header-left img{
    max-height: var(--logo-max-h-mobile);
    max-width: var(--logo-max-w-mobile);
  }

  .social-label{ display: none; }
  .menu-toggle{ display: inline-flex; }

  .header-inner{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand toggle"
      "nav nav";
    gap: 10px;
    align-items: center;
  }

  .header-left{ grid-area: brand; }
  .menu-toggle{ grid-area: toggle; justify-self: end; }
  .main-nav{ grid-area: nav; }

  /* panel */
  .main-nav{
    display: none;
    width: 100%;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(8, 65, 77, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
  }

  .main-nav.open{ display: block; }

  /* fallback si tu botón solo cambia aria-expanded */
  .menu-toggle[aria-expanded="true"] + .main-nav{ display: block; }

  .main-nav ul{
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 4px;
  }

  .nav-link{
    width: 100%;
    text-align: left;
    padding: 12px 12px;
    border-radius: 12px;
    text-decoration: none;
    opacity: 1;
  }

  .nav-link:hover{
    background: rgba(255,255,255,0.12);
  }

  /* dropdown dentro del panel */
  .dropdown-menu{
    position: static;
    display: none;
    min-width: 0;
    margin: 6px 0 4px 0;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.92);
    box-shadow: none;
  }

  .nav-item.dropdown.open .dropdown-menu{ display: block; }

  .dropdown-link{
    white-space: normal;
    padding: 10px 10px;
    border-radius: 10px;
  }
}


/* =====================================================
   06. BOTONES
   ===================================================== */
.btn-primary {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 11px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  transition: transform 0.08s ease, box-shadow 0.08s ease, opacity 0.08s ease;
  box-shadow: 0 12px 22px rgba(29, 165, 189, 0.3);
}

.btn-primary:hover {
  opacity: 0.96;
  transform: translateY(-1px);
}

.btn-large {
  padding: 13px 30px;
  font-size: 1rem;
}


/* =====================================================
   07. SECCIONES GENERALES
   ===================================================== */
.section {
  padding: 64px 0;
  background: #f9fafb;
}

.section-alt {
  padding: 64px 0;
  background: var(--color-surface);
}

.section h2 {
  font-size: 2rem;
  margin-bottom: 14px;
}

.section-intro {
  max-width: 640px;
  margin: 0 auto 28px;
  text-align: center;
  color: var(--color-text-soft);
}


/* =====================================================
   08. HERO
   ===================================================== */
.hero {
  background: #ffffff;
  padding: 72px 0 56px;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr);
  gap: 40px;
  align-items: center;
}

.hero-highlight {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(255, 255, 255);
  color: var(--color-primary-dark);
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.hero h1 {
  font-size: clamp(2.1rem, 3.1vw, 2.7rem);
  margin-bottom: 16px;
}

.hero p {
  color: var(--color-text-soft);
  margin-bottom: 10px;
}

/* SOLO el hero empuja la imagen a la derecha */
.hero .hero-side img {
  margin-left: auto;
}

/* En el resto de secciones, imagen centrada */
.section .hero-side img {
  margin-left: 0;
}


/* =====================================================
   09. LAYOUT 2 COLUMNAS + ZIGZAG
   ===================================================== */
.two-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr);
  gap: 32px;
  align-items: center;
}

.two-cols p {
  color: var(--color-text-soft);
}

.two-cols > div:only-child {
  grid-column: 1 / -1;
  max-width: 850px;
  margin-inline: auto;
}

.section:nth-of-type(even) .two-cols > div:first-child { order: 2; }
.section:nth-of-type(even) .two-cols > div:last-child  { order: 1; }


/* =====================================================
   10. CAJAS / CARDS / GRID
   ===================================================== */
.info-box,
.card {
  background: var(--color-surface);
  border-radius: 16px;
  border: 1px solid var(--color-border);
  padding: 18px 20px;
}

.info-box h3 {
  margin-bottom: 10px;
}

.bullets {
  padding-left: 18px;
  color: var(--color-text-soft);
}

.bullets li {
  list-style: disc;
  margin-bottom: 6px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.card h3 {
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.card ul {
  padding-left: 16px;
  color: var(--color-text-soft);
}


/* =====================================================
   11. FAQ
   ===================================================== */
.faq {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-text);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "▾";
  font-size: 0.8rem;
  color: #6b7280;
}

.faq-item[open] summary::after {
  content: "▴";
}

.faq-content {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-soft);
}


/* =====================================================
   12. CTA FINAL
   ===================================================== */
.section-cta {
  background: var(--color-primary-dark);
  color: #e5e7eb;
}

.cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.section-cta h2 {
  margin-bottom: 10px;
}

.section-cta p {
  color: #e5e7ebb3;
}


/* =====================================================
   13. FOOTER (LOGOS CONTROLADOS + MISMO RANGO QUE TEXTO)
   ===================================================== */

/* 1) Rango/ancho igual al texto (logos + aviso + links) */
.footer-legal{
  max-width: 920px;      /* rango pro (más angosto que 1100) */
  margin: 0 auto;
}

/* 2) Grupo de logos (control en bloque) */
.footer-logo-group{
  --logos-gap: 56px;     /* 80px era demasiado */
  --logos-max-h: 90px;   /* más grandes sin romper */
  
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--logos-gap);
  flex-wrap: wrap;

  padding: 10px 0 6px;   /* evita que queden pegados arriba */
  margin: 0 auto 14px;
}

/* 3) Base para todos los logos */
.footer-logo{
  max-height: var(--logos-max-h);
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.95;

  display: block;
  transform-origin: center;

  /* Ajustes finos por logo */
  transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--s, 1));
}

/* 4) Ajustes individuales (SIN escalas exageradas) */
.footer-logo--brand{
  --s: 1.20;   /* antes 2.00 (rompía el balance) */
  --y: 2px;
  --x: 0px;
  max-width: 190px; /* controla horizontales sin deformar */
}

.footer-logo--rtt{
  --s: 1.05;
  --y: 1px;
  --x: 0px;
  max-width: 240px;
}

.footer-logo--iha{
  --s: 1.00;
  --y: 0px;
  --x: 0px;
  max-width: 165px;
}

/* 5) Responsive */
@media (max-width: 640px){
  .footer-legal{
    max-width: 100%;
  }

  .footer-logo-group{
    --logos-gap: 18px;
    --logos-max-h: 46px;
    padding: 8px 0 2px;
    margin-bottom: 12px;
  }

  .footer-logo--brand{ max-width: 160px; }
  .footer-logo--rtt{   max-width: 200px; }
  .footer-logo--iha{   max-width: 140px; }
}


.footer-main {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  margin-bottom: 12px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-role {
  margin: 0;
  color: rgba(229, 231, 235, 0.9);
  line-height: 1.35;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-links a {
  color: rgba(229, 231, 235, 0.95);
  text-decoration: none;
  font-size: 0.82rem;
}

.footer-links a:hover { text-decoration: underline; }

.footer-contact {
  display: flex;
  justify-content: flex-end;
}

.footer-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgba(229, 231, 235, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.85);
  border-radius: 999px;
  padding: 8px 12px;
  width: fit-content;
}

.footer-whatsapp:hover { background: rgba(148, 163, 184, 0.18); }

.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-disclaimer {
  margin: 0;
  color: rgba(229, 231, 235, 0.9);
}

.legal-text {
  margin: 0;
  max-width: 1100px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.45;
  font-size: 15px;
}

.legal-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.legal-links a {
  color: rgba(229, 231, 235, 0.92);
  text-decoration: none;
}

.legal-links a:hover { text-decoration: underline; }

.copyright {
  margin: 0;
  text-align: center;
  color: rgba(229, 231, 235, 0.75);
}

.site-footer {
  background: var(--color-footer-bg);
  width: 100%;
  padding: 25px;
}



/* =====================================================
   14. SOBRE MÍ
   ===================================================== */
.about-hero h1 { margin-bottom: 12px; }

.about-text p + p { margin-top: 10px; }

.about-highlights {
  margin-top: 18px;
  padding-left: 18px;
  color: var(--color-text-soft);
}

.about-highlights li {
  list-style: disc;
  margin-bottom: 6px;
}

.about-photo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-photo-placeholder {
  width: 280px;
  height: 320px;
  border-radius: 24px;
  border: 1px dashed var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-soft);
  font-size: 0.9rem;
}


/* =====================================================
   15. TESTIMONIOS (base)
   ===================================================== */
.testimonials-hero h1 { margin-bottom: 12px; }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.testimonial-card {
  background: var(--color-surface);
  border-radius: 16px;
  border: 1px solid var(--color-border);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.testimonial-quote-icon i {
  font-size: 1.6rem;
  color: var(--color-primary);
}

.testimonial-text { color: var(--color-text-soft); }
.testimonial-name { font-weight: 600; }
.testimonial-tag { font-size: 0.85rem; color: #6b7280; }


/* =====================================================
   16. CONTACTO
   ===================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr);
  gap: 32px;
  align-items: flex-start;
}

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

.contact-card {
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: #f9fafb;
  color: var(--color-text-soft);
  font-size: 0.95rem;
}

.contact-card p + p { margin-top: 6px; }
.contact-card i { color: var(--color-primary); margin-right: 6px; }

.contact-form-wrapper h2 { margin-bottom: 14px; }

.contact-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.contact-form label {
  font-size: 0.9rem;
  color: var(--color-text-soft);
}

.contact-form input,
.contact-form textarea {
  border-radius: 10px;
  border: 1px solid var(--color-border);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px rgb(255, 255, 255);
}


/* =====================================================
   17. DESCUENTOS (cards)
   ===================================================== */
.discount-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 32px;
}

.discount-box {
  background: var(--color-surface);
  border-radius: 16px;
  border: 1px solid var(--color-border);
  padding: 22px 24px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.discount-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.08);
}

.discount-title {
  font-size: 1.25rem;
  margin-bottom: 8px;
  color: var(--color-text);
  font-weight: 700;
  font-family: "Raleway", sans-serif;
}

.discount-desc {
  color: var(--color-text-soft);
  margin-bottom: 12px;
  font-size: 0.95rem;
}

.discount-points {
  padding-left: 18px;
  color: var(--color-text-soft);
  font-size: 0.9rem;
}

.discount-points li {
  list-style: disc;
  margin-bottom: 6px;
}


/* =====================================================
   18. HISTORIAS DE TRANSFORMACIÓN
   ===================================================== */
#historias-transformacion h1 {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

#historias-transformacion > .container > p {
  max-width: 780px;
  margin-top: 8px;
  margin-bottom: 28px;
  color: var(--color-text-soft);
}

#historias-transformacion .testimonials-grid { margin-top: 10px; }

#historias-transformacion .testimonial-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid var(--color-primary);
  padding: 20px 22px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#historias-transformacion .testimonial-quote-icon {
  font-size: 1.9rem;
  color: var(--color-primary);
  margin-bottom: 4px;
}

#historias-transformacion .testimonial-stars {
  color: #7ad3ea;
  font-size: 1.1rem;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

#historias-transformacion .testimonial-text {
  color: var(--color-text-soft);
  font-size: 0.96rem;
}

#historias-transformacion .testimonial-name {
  font-weight: 600;
  margin-top: 4px;
}

#historias-transformacion .testimonial-tag {
  font-size: 0.85rem;
  color: #6b7280;
}


/* =====================================================
   19. VISIÓN / MISIÓN
   ===================================================== */
.vision-mision { background: var(--color-primary-soft); }

.vision-mision-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: flex-start;
  padding: 16px 0;
}

.vm-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.vm-icon img {
  width: 200px;
  height: auto;
  display: block;
  opacity: 0.9;
}

.vm-text h3 {
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.vm-text p {
  color: var(--color-text-soft);
  font-size: 0.98rem;
}


/* =====================================================
   20. LO QUE DICEN...
   ===================================================== */
#lo-que-dicen h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}

#lo-que-dicen .loque-intro {
  max-width: 780px;
  margin-top: 8px;
  margin-bottom: 28px;
  color: var(--color-text-soft);
}

.loque-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.loque-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid var(--color-primary);
  padding: 18px 20px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

.loque-text {
  color: var(--color-text-soft);
  font-size: 0.96rem;
}

.loque-text + .loque-text { margin-top: 8px; }

.loque-name {
  margin-top: 10px;
  font-weight: 600;
  color: var(--color-text);
}


/* =====================================================
   21. GRID CASOS RTT – 3 COLUMNAS
   ===================================================== */
.cases-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 18px;
}

.cases-col {
  list-style: none;
  padding-left: 0;
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.95rem;
}

.cases-col li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  line-height: 1.4;
}

.cases-col li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0.12em;
  font-size: 20px;
  line-height: 1;
  color: var(--color-primary);
}


/* =====================================================
   22. RTT PROGRAMAS (Acordeón)
   ===================================================== */

/* ---------- 22.1 Base ---------- */
.rtt-programs{
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.rtt-program{
  border-radius: 16px;
  border: 1px solid rgba(19,127,143,.22);
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

/* ---------- 22.2 Fondos por bloque (GRADIENT base) ---------- */
.rtt-program--men{
  background-image:
    linear-gradient(180deg, rgba(19,127,143,.18), rgba(19,127,143,.08));
}

.rtt-program--women{
  background-image:
    linear-gradient(180deg, rgba(223,245,248,.95), rgba(223,245,248,.55));
  border-color: rgba(19,127,143,.18);
}

/* ---------- 22.3 Layout interno ---------- */
.rtt-acc{
  padding: 18px 18px 20px;
}

.rtt-acc__summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.rtt-acc__summary::-webkit-details-marker{ display: none; }

.rtt-acc__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.rtt-acc__titles{
  display: grid;
  gap: 4px;
}

.rtt-acc__title{
  font-size: 1.35rem;
  line-height: 1.25;
}

.rtt-acc__subtitle{
  margin-top: 2px;
  color: var(--color-text-soft);
  font-weight: 600;
}

.rtt-acc__chev{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(19,127,143,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.32);
  flex-shrink: 0;
  transition: transform .18s ease, background .18s ease;
}

.rtt-acc__chev i{
  font-size: 1rem;
  color: var(--color-primary);
}

/* ---------- 22.4 Preview (cuadro imagen + texto) ---------- */
.rtt-acc__preview{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.rtt-acc__img{
  width: 120px;
  height: 92px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(19,127,143,.18);
  background: rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* si en algún momento pones <img> dentro */
.rtt-acc__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rtt-acc__imgph{
  font-size: .86rem;
  color: var(--color-text-soft);
  text-align: center;
  padding: 10px;
  line-height: 1.2;
}

.rtt-acc__lead{
  color: var(--color-text-soft);
  margin: 0;
}

/* ---------- 22.5 Body ---------- */
.rtt-acc__body{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(19,127,143,.16);
  display: grid;
  gap: 10px;
}

.rtt-acc__h3{
  margin-top: 4px;
  font-size: 1.05rem;
}

.rtt-acc__muted{ color: var(--color-text-soft); }

.rtt-acc__list{
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.rtt-acc__list li{
  list-style: none;
  color: var(--color-text-soft);
  border-radius: 14px;
  border: 1px solid rgba(19,127,143,.14);
  background: rgba(255,255,255,.55);
  padding: 10px 12px;
}

.rtt-acc__tick{
  color: var(--color-primary-dark);
  margin-right: 6px;
  font-weight: 700;
}

.rtt-acc__note{ margin-top: 2px; }
.rtt-acc__gift{ color: var(--color-text-soft); }

/* ---------- 22.6 CTA ---------- */
.rtt-acc__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 700;
  width: fit-content;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}

.rtt-acc__cta:hover{
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(29, 165, 189, 0.25);
}

/* Chevron al abrir (si usas <details open>) */
.rtt-acc[open] .rtt-acc__chev{
  transform: rotate(180deg);
  background: rgba(255,255,255,.52);
}

/* ---------- 22.7 IMÁGENES por bloque (rutas consistentes) ---------- */
.rtt-program--men .rtt-acc__img{
  background-image: url("../img/programa-hombre.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.rtt-program--women .rtt-acc__img{
  background-image: url("../img/programa-mujer.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.rtt-program--men .rtt-acc__imgph,
.rtt-program--women .rtt-acc__imgph{
  display: none;
}

/* ---------- 22.8 TIPOGRAFÍAS separadas por bloque + fondos imagen ---------- */
/* HOMBRES: imagen + gradient + texto blanco */
.rtt-program--men{
  background-image:
    url("../img/rtt-hombres.png"),
    linear-gradient(180deg, rgba(19,127,143,.18), rgba(19,127,143,.08));
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.rtt-program--men .rtt-acc__title,
.rtt-program--men .rtt-acc__h3{
  color: #ffffff;
}

.rtt-program--men .rtt-acc__subtitle,
.rtt-program--men .rtt-acc__lead,
.rtt-program--men .rtt-acc__muted,
.rtt-program--men .rtt-acc__gift,
.rtt-program--men .rtt-acc__body p{
  color: rgba(255,255,255,.90);
}

.rtt-program--men .rtt-acc__list li{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.92);
}

.rtt-program--men .rtt-acc__tick{ color: #ffffff; }

.rtt-program--men .rtt-acc__chev{
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
}

.rtt-program--men .rtt-acc__chev i{ color: #ffffff; }

.rtt-program--men .rtt-acc__cta{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.35);
  color: #ffffff;
}

.rtt-program--men .rtt-acc__cta:hover{
  background: rgba(255,255,255,.22);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.18);
}

/* MUJERES: imagen + gradient + texto oscuro */
.rtt-program--women{
  background-image:
    url("../img/rtt-mujeres.png"),
    linear-gradient(180deg, rgba(223,245,248,.95), rgba(223,245,248,.55));
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.rtt-program--women .rtt-acc__title,
.rtt-program--women .rtt-acc__h3{
  color: #000;
}

.rtt-program--women .rtt-acc__subtitle,
.rtt-program--women .rtt-acc__lead,
.rtt-program--women .rtt-acc__muted,
.rtt-program--women .rtt-acc__gift,
.rtt-program--women .rtt-acc__body p{
  color: var(--color-text-soft);
}

.rtt-program--women .rtt-acc__list li{
  background: rgba(255,255,255,.40);
  border-color: rgba(19,127,143,.14);
  color: #000;
}

.rtt-program--women .rtt-acc__chev i{
  color: var(--color-primary);
}


/* =====================================================
   23. RESPONSIVE (GLOBAL)
   ===================================================== */
@media (max-width: 980px) {
  .hero-inner,
  .two-cols,
  .grid-3,
  .cta-inner {
    grid-template-columns: 1fr;
  }

  .hero { padding: 56px 0 56px; }

  .hero-side img {
    max-width: 420px;
    margin: 20px auto 0;
  }

  .section:nth-of-type(even) .two-cols > div:first-child,
  .section:nth-of-type(even) .two-cols > div:last-child {
    order: initial;
  }

  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .vision-mision-strip{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .vm-item{ align-items: flex-start; }

  .vm-icon{
    flex: 0 0 72px;
    margin-top: 2px;
  }
}

@media (max-width: 640px) {
  .section,
  .section-alt { padding: 48px 0; }

  .grid-3 { gap: 14px; }
  .testimonials-grid { grid-template-columns: 1fr; }

  .discount-cards { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .footer-main {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-contact { justify-content: center; }

  .discount-cards { grid-template-columns: 1fr 1fr; }
  .loque-grid { grid-template-columns: 1fr; }

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

@media (max-width: 600px) {
  .footer-logo-group img { max-width: 360px; }

  .footer-links {
    flex-direction: column;
    gap: 10px;
  }

  .cases-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 740px){
  .rtt-acc__preview{ grid-template-columns: 1fr; }

  .rtt-acc__img{
    width: 100%;
    height: 180px;
  }

  .rtt-acc__title{ font-size: 1.2rem; }
}

@media (min-width: 1400px) {
  .container { max-width: 1300px; }
}


/* =====================================================
   24. FIXES FINALES (tus secciones específicas)
   ===================================================== */

/* CASOS RTT – CENTRADO + SIN ZIGZAG + LISTAS CENTRADAS */
#casos-rtt .container.two-cols{
  display: block;
  max-width: 1100px;
  margin-inline: auto;
}

#casos-rtt .container.two-cols > div:last-child{ display: none; }

#casos-rtt h2{ text-align: center; }

#casos-rtt p{
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}

#casos-rtt .cases-grid-3{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1050px;
  margin-inline: auto;
}

#casos-rtt .cases-col{
  list-style: none;
  padding: 0;
  margin: 0;

  display: inline-block;
  text-align: left;
  justify-self: center;

  color: var(--color-text-soft);
  font-size: 0.95rem;
}

#casos-rtt .cases-col li{
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  line-height: 1.4;
}

#casos-rtt .cases-col li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0.12em;
  font-size: 20px;
  line-height: 1;
  color: var(--color-primary);
}

#casos-rtt .cases-cta{
  margin-top: 28px;
  text-align: center;
}

#casos-rtt .cases-link-box{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 700;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}

#casos-rtt .cases-link-box:hover{
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(29, 165, 189, 0.25);
}

@media (max-width: 900px){
  #casos-rtt .cases-grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  #casos-rtt .cases-grid-3{ grid-template-columns: 1fr; }
}

/* HISTORIAS DE TRANSFORMACIÓN – TEXTO CENTRADO Y ANCHO */
#historias-transformacion > .container > h1 {
  text-align: center;
  margin-bottom: 18px;
}

#historias-transformacion > .container > p {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto 36px;
  color: var(--color-text-soft);
  line-height: 1.7;
}

/* HERO #que-es-rtt – CENTRADO REAL */
#que-es-rtt .hero-inner{
  grid-template-columns: 1fr !important;
  justify-items: center;
  text-align: center;
}

#que-es-rtt .hero-text{
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}

#que-es-rtt .hero-text p{
  max-width: 1100px;
  margin-inline: auto;
}


/* =====================================================
   25. UTILIDADES (CENTRADO GLOBAL)
   ===================================================== */
.text-center-wide {
  text-align: center;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* =====================================================
   PATCH RESPONSIVE NAV (MÓVIL)
   - Solo WhatsApp
   - Logo más grande
   - Hamburguesa con 3 barras VERTICALES
   - Panel estilo dropdown (igual a Terapias/Transformación)
   ===================================================== */

@media (max-width: 900px){

  /* 1) SOLO WhatsApp en móvil */
  .header-right .social-label{ display: none; }
  .header-right .social-links a{ display: none; }
  .header-right .social-links a[aria-label="WhatsApp"]{
    display: inline-flex;
  }

  /* 2) Logo más grande en móvil (ajusta a tu gusto) */
  :root{
    --logo-max-h-mobile: 120px;
    --logo-max-w-mobile: 340px;
    --logo-scale-mobile: 1.10;
  }

  /* 3) Botón hamburguesa: 3 barras VERTICALES */
  .menu-toggle{
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.30);
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;           /* espacio entre barras */
    padding: 0;
  }

  .menu-toggle span{
    width: 3px;         /* delgadas */
    height: 22px;       /* altas (verticales) */
    border-radius: 999px;
    background: #ffffff;
    display: block;
  }

  /* 4) Panel del menú (main-nav) estilo DROPDOWN */
  .main-nav{
    /* NO tocamos tu display: none; del mobile, solo look */
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
    padding: 8px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .main-nav ul{
    padding: 0;
    gap: 6px;
  }

  /* items del panel iguales a dropdown-link */
  .main-nav .nav-link{
    color: var(--color-text);
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    opacity: 1;
  }

  .main-nav .nav-link:hover{
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    text-decoration: none;
  }

  /* dropdown interno dentro del panel */
  .main-nav .dropdown-menu{
    position: static;
    margin: 6px 0 4px 0;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: #ffffff;
    box-shadow: none;
  }

  .main-nav .dropdown-link{
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--color-text-soft);
    white-space: normal;
  }

  .main-nav .dropdown-link:hover{
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
  }
}



/* =====================================================
   PATCH MOBILE (SIN ROMPER): LOGO | WHATSAPP (CENTRO) | HAMBURGUESA (DERECHA)
   + NAV ABAJO (COMO YA LO TENÍAS)
   ===================================================== */

@media (max-width: 900px){

  /* 1) Mantén nav abajo (tu estructura correcta) */
  .header-inner{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "brand whatsapp toggle"
      "nav nav nav";
    align-items: center;
    gap: 10px;
  }

  .header-left{ grid-area: brand; }
  .main-nav{ grid-area: nav; }
  .menu-toggle{ grid-area: toggle; justify-self: end; }

  /* 2) WhatsApp CENTRO (solo whatsapp visible) */
  .header-right{
    grid-area: whatsapp;
    justify-self: center;
    align-self: center;
    display: flex;
    align-items: center;
  }

  .header-right .social-label{ display: none; }
  .header-right .social-links a{ display: none; }
  .header-right .social-links a[aria-label="WhatsApp"]{
    display: inline-flex;
  }

  /* 3) Logo un poco más grande */
  :root{
    --logo-max-h-mobile: 115px;
    --logo-max-w-mobile: 320px;
    --logo-scale-mobile: 1.10;
  }

  /* 4) Hamburguesa: 3 líneas HORIZONTALES apiladas (arriba/medio/abajo) */
  .menu-toggle{
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.30);
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(10px);

    display: inline-flex;
    flex-direction: column;     /* apiladas */
    align-items: center;
    justify-content: center;
    gap: 6px;

    /* si lo quieres "girado", usa -10deg o 0deg (suave) */
    transform: rotate(-10deg);
  }

  .menu-toggle span{
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: #ffffff;
    display: block;
  }

  /* 5) Panel del menú (nav) hacia abajo, estilo "tarjeta" */
  .main-nav{
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
    padding: 8px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .main-nav ul{
    padding: 0;
    gap: 6px;
  }

  .main-nav .nav-link{
    color: var(--color-text);
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    opacity: 1;
  }

  .main-nav .nav-link:hover{
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    text-decoration: none;
  }

  .main-nav .dropdown-menu{
    position: static;
    margin: 6px 0 4px 0;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: #ffffff;
    box-shadow: none;
  }

  .main-nav .dropdown-link{
    white-space: normal;
    padding: 10px 12px;
    border-radius: 10px;
  }
}

/* =====================================================
   PATCH AJUSTE FINO MOBILE: WhatsApp centrado/grande + hamburguesa recta
   ===================================================== */
@media (max-width: 900px){

  /* WhatsApp: realmente centrado y más grande */
  .header-right{
    justify-self: center;
    width: 100%;
    justify-content: center;
  }

  .header-right .social-links a[aria-label="WhatsApp"]{
    transform: scale(1.22);     /* más grande */
    transform-origin: center;
    padding: 8px 14px;          /* pill más “premium” */
    font-size: 1rem;
  }

  .header-right .social-links a[aria-label="WhatsApp"] i{
    font-size: 1.15rem;
  }

  /* Hamburguesa: SIN ángulo (recta) */
  .menu-toggle{
    transform: rotate(0deg) !important;
  }
}

/* =====================================================
   AJUSTE FINAL MOBILE – margen hamburguesa + WhatsApp centrado
   ===================================================== */
@media (max-width: 900px){

  /* 1) Margen a la derecha del botón hamburguesa */
  .menu-toggle{
    margin-right: 12px;   /* ajusta a 8px–16px si quieres */
  }

  /* 2) WhatsApp realmente centrado en su columna */
  .header-right{
    margin-left: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header-right .social-links{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header-right .social-links a[aria-label="WhatsApp"]{
    margin: 0 auto;       /* 🔑 centrado real */
  }
}

/* =====================================================
   RTT DOCUMENTO LIMPIO – IMAGEN GRANDE + TEXTO
   ===================================================== */

.page-title{
  text-align: center;
  margin-bottom: 56px;
}

.rtt-doc{
  max-width: 900px;
  margin: 0 auto 96px;
}

.rtt-doc h2{
  font-size: 2rem;
  margin-bottom: 6px;
}

.rtt-subtitle{
  font-size: 1.2rem;
  color: var(--color-primary-dark);
  margin-bottom: 24px;
}

.rtt-image{
  width: 100%;
  border-radius: 28px;
  margin-bottom: 28px;
  box-shadow: 0 22px 48px rgba(15,23,42,0.18);
}

.rtt-doc p{
  color: var(--color-text-soft);
  margin-bottom: 14px;
  line-height: 1.7;
}

.rtt-doc ul{
  padding-left: 18px;
  margin: 20px 0;
  color: var(--color-text-soft);
}

.rtt-doc li{
  margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 640px){
  .rtt-doc{
    margin-bottom: 72px;
  }

  .rtt-image{
    border-radius: 20px;
  }
}

/* =====================================================
   RTT IMÁGENES – TAMAÑO VISUAL UNIFICADO
   ===================================================== */

.rtt-image{
  width: 100%;
  max-width: 900px;        /* mismo ancho visual */
  max-height: 420px;       /* 🔑 controla la altura */
  object-fit: cover;       /* recorta elegante sin deformar */
  border-radius: 28px;
  display: block;
  margin: 0 auto 28px;
}

/* =====================================================
   RTT IMÁGENES – AJUSTE FINO POR TIPO (HOMBRE / MUJER)
   ===================================================== */

/* Base común */
.rtt-image{
  width: 100%;
  max-width: 900px;
  object-fit: cover;
  border-radius: 28px;
  display: block;
  margin: 0 auto 28px;
}

/* Mujeres – se ve bien más compacta */
.rtt-doc img[src*="mujer"]{
  max-height: 420px;
}

/* Hombres – le damos más aire vertical */
.rtt-doc img[src*="hombre"]{
  max-height: 500px;   /* 🔑 aquí está la clave */
}

/* =====================================================
   RTT IMÁGENES – AJUSTAR POSICIÓN DEL RECORTE
   ===================================================== */

/* Base */
.rtt-image{
  width: 65%;
  max-width: 900px;
  object-fit: cover;
  border-radius: 28px;
  display: block;
  margin: 0 auto 28px;
}

/* HOMBRES: baja la imagen dentro del recorte */
.rtt-doc img[src*="hombre"]{
  max-height: 500px;
  object-position: center 35%; /* 🔑 baja la imagen */
}

/* =====================================================
   RTT – TEXTO SE ADAPTA A LA ALTURA DE LA IMAGEN
   (La imagen manda. El texto no se pasa.)
   ===================================================== */

/* 1) Sin zig-zag SOLO en esta página */
#subconsciente.section:nth-of-type(even) .two-cols > div:first-child,
#subconsciente.section:nth-of-type(even) .two-cols > div:last-child,
#que-es-la-terapia-rtt.section:nth-of-type(even) .two-cols > div:first-child,
#que-es-la-terapia-rtt.section:nth-of-type(even) .two-cols > div:last-child,
#como-funciona-rtt.section:nth-of-type(even) .two-cols > div:first-child,
#como-funciona-rtt.section:nth-of-type(even) .two-cols > div:last-child{
  order: initial;
}

/* 2) 2 columnas normales, alineadas arriba (más control) */
#subconsciente .two-cols,
#que-es-la-terapia-rtt .two-cols,
#como-funciona-rtt .two-cols{
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;   /* 🔑 texto y foto arrancan arriba */
  gap: 40px;
}

/* 3) Definimos una "altura objetivo" que representa la altura visual de la imagen.
      El texto NO puede pasar de esa altura. */
#subconsciente,
#que-es-la-terapia-rtt,
#como-funciona-rtt{
  --rtt-media-h: 360px; /* 👈 AJUSTA ESTE NÚMERO (300–380 suele quedar perfecto) */
}

/* 4) Imagen: la dejamos como está (manda), pero fijamos altura consistente */
#subconsciente .hero-side img,
#que-es-la-terapia-rtt .hero-side img,
#como-funciona-rtt .hero-side img{
  width: 100%;
  height: var(--rtt-media-h);  /* 🔑 esta es la referencia */
  object-fit: cover;
  border-radius: 22px;
  display: block;
}

/* 5) Texto: se limita a la misma altura que la imagen */
#subconsciente .two-cols > div:first-child,
#que-es-la-terapia-rtt .two-cols > div:first-child,
#como-funciona-rtt .two-cols > div:first-child{
  max-height: var(--rtt-media-h); /* 🔑 texto no sobrepasa a la imagen */
  overflow: hidden;              /* corta el exceso si hay mucho texto */
  display: flex;
  flex-direction: column;
  justify-content: center;       /* centra el texto dentro de la altura */
}

/* 6) Tipografía: un poco más grande pero compacta para que entre mejor */
#subconsciente h1,
#que-es-la-terapia-rtt h1,
#como-funciona-rtt h2{
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 10px;
}

#subconsciente p,
#que-es-la-terapia-rtt p,
#como-funciona-rtt p{
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 10px;
  max-width: 60ch;
}

/* 7) Responsive: en móvil vuelve normal (no cortamos texto en 1 columna) */
@media (max-width: 980px){
  #subconsciente .two-cols > div:first-child,
  #que-es-la-terapia-rtt .two-cols > div:first-child,
  #como-funciona-rtt .two-cols > div:first-child{
    max-height: none;
    overflow: visible;
    justify-content: flex-start;
  }

  #subconsciente .hero-side img,
  #que-es-la-terapia-rtt .hero-side img,
  #como-funciona-rtt .hero-side img{
    height: auto;
  }
}

/* =====================================================
   IMÁGENES RECORTADAS (MISMO CORTE EN TODO EL SITIO)
   - misma altura
   - mismo borde
   - mismo estilo visual
   ===================================================== */

.rtt-crop{
  width: 100%;
  height: 520px;          /* 👈 mismo “corte” que las otras */
  object-fit: cover;      /* recorta sin deformar */
  object-position: center;/* foco al centro */
  border-radius: 22px;
  display: block;
}

/* =====================================================
   PATCH CONTACTO – 2 columnas hasta tablet
   (no afecta móvil)
   ===================================================== */

/* Forzamos 2 columnas en pantallas medianas/grandes */
.contact-layout{
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr);
  gap: 32px;
  align-items: flex-start;
}

/* Si tu media query global (980px) lo pasa a 1 col, lo “pisamos” */
@media (max-width: 980px){
  .contact-layout{
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* Solo en celular (ya de verdad) se vuelve 1 columna */
@media (max-width: 720px){
  .contact-layout{
    grid-template-columns: 1fr;
  }
}

.contact-info h1{
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.contact-info p{
  max-width: 62ch;
}

.contact-card{
  max-width: 680px;
}

.contact-info .btn-primary{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}


/* =====================================================
   FIXES RESPONSIVE (NO BORRA NADA)
   1) Header background no se corta en ciertos anchos
   2) RTT / two-cols: en móvil SIEMPRE 1 columna (como tu 1ra foto)
   ===================================================== */

/* ---------- 1) HEADER: evita “cortes” del PNG en ciertos tamaños ---------- */
@media (max-width: 1100px){
  .site-header{
    /* quita el offset que causa cortes */
    background-position: center center !important;
    background-size: cover !important;
  }
}

/* (opcional) en pantallas muy pequeñas, a veces cover se ve mejor así */
@media (max-width: 520px){
  .site-header{
    background-position: center top !important;
  }
}


/* ---------- 2) RTT: NO permitir 2 columnas en móvil ---------- */
/* Esto arregla exactamente lo de tu screenshot 2 (texto a la izq + imagen chiquita a la der) */
@media (max-width: 980px){

  #subconsciente .two-cols,
  #que-es-la-terapia-rtt .two-cols,
  #como-funciona-rtt .two-cols{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  #subconsciente .hero-side,
  #que-es-la-terapia-rtt .hero-side,
  #como-funciona-rtt .hero-side{
    order: 2;
  }

  #subconsciente .hero-side img,
  #que-es-la-terapia-rtt .hero-side img,
  #como-funciona-rtt .hero-side img{
    width: 100% !important;
    height: auto !important;
    max-width: 520px;
    margin: 16px auto 0;
    border-radius: 22px;
  }
}

/* Extra: “breakpoint intermedio” (tablets) por si ves el split en anchos raros */
@media (max-width: 860px){

  #subconsciente .two-cols,
  #que-es-la-terapia-rtt .two-cols,
  #como-funciona-rtt .two-cols{
    grid-template-columns: 1fr !important;
  }
}


/* =========================
   BENEFICIOS CON CHULITO
   ========================= */

.benefits-block{
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 18px;
}

.benefit-item{
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.benefit-check{
  color: var(--color-primary);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 2px;
}

.benefit-item strong{
  display: block;
  font-size: 1rem;
  margin-bottom: 4px;
}

.benefit-item p{
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-soft);
  line-height: 1.55;
}


/* =====================================================
   FIX LISTAS RTT EN MÓVIL
   ===================================================== */

@media (max-width: 768px) {

  /* contenedor general de casos */
  #casos-rtt .cases-grid-3,
  #faq .cases-grid-3 {
    display: block !important;
  }

  /* cada columna se vuelve una sola lista */
  #casos-rtt .cases-col,
  #faq .cases-col {
    width: 100%;
    margin-bottom: 18px;
  }

  /* bullets más limpios en móvil */
  #casos-rtt .cases-col li,
  #faq .cases-col li {
    font-size: 0.95rem;
    line-height: 1.55;
  }
}

/* =====================================================
   SOBRE MÍ - FOTO (ESPACIO + REDONDEADO + ALTURA EN MÓVIL)
   ===================================================== */

.about-hero .two-cols{
  align-items: center;
  gap: 28px; /* espacio entre texto y foto en desktop */
}

.about-photo{
  display: flex;
  justify-content: center;
}

.about-img{
  width: min(420px, 100%);
  height: 520px;           /* altura controlada en desktop */
  object-fit: cover;       /* mantiene proporción y recorta bonito */
  border-radius: 22px;     /* estilo redondeado como el resto */
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

/* MÓVIL */
@media (max-width: 768px){
  .about-hero .two-cols{
    display: flex;         /* por si tu two-cols era grid */
    flex-direction: column;
    gap: 18px;
  }

  /* espacio arriba y abajo SOLO en móvil */
  .about-photo{
    margin-top: 14px;
    margin-bottom: 14px;
  }

  .about-img{
    height: 360px;         /* altura ideal en móvil */
    border-radius: 20px;
  }
}