:root {
  --ink: #1d1d1b;
  --muted: #5b665f;
  --brand: #183e30;        /* verde principal del manual */
  --brand-2: #004734;      /* verde secundario */
  --brand-deep: #122e23;   /* fondo de bandas oscuras */
  --brand-soft: #ece1c1;   /* crema principal */
  --sand: #f7eee3;         /* arena secundario */
  --accent: #b85c33;
  --wa: #25d366;
  --line: #e5ddcd;
  --radius: 18px;
  --shadow-sm: 0 2px 10px rgba(24, 62, 48, .07);
  --shadow: 0 18px 44px rgba(24, 62, 48, .14);
  --max: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.5vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 750; }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }
a { color: var(--brand); }

.container { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }
.narrow { max-width: 760px; }
.center { text-align: center; margin-inline: auto; }

.skip-link { position: absolute; left: -9999px; background: var(--brand); color: #fff; padding: .75rem 1rem; z-index: 200; }
.skip-link:focus { left: 0; top: 0; }

.tag {
  display: inline-block; text-transform: uppercase; letter-spacing: .14em;
  font-size: .75rem; font-weight: 700; margin: 0 0 1rem;
  color: rgba(255, 255, 255, .82);
}
.tag-dark { color: var(--brand); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 253, 249, .9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 44px; width: auto; }
.nav ul { display: flex; align-items: center; gap: 1.7rem; list-style: none; margin: 0; padding: 0; }
.nav a { text-decoration: none; color: var(--ink); font-size: .94rem; font-weight: 500; }
.nav a:hover { color: var(--brand); }

/* Submenu de patologias. Sin JS: se abre al pasar el raton y tambien al recibir
   el foco, para que funcione con teclado. */
.nav .has-sub { position: relative; }
.nav .has-sub > a::after { content: "\25BE"; margin-left: .35rem; font-size: .7em; }
/* Puente invisible sobre el hueco que separa el enlace del panel: sin el, el
   raton pierde el :hover al bajar y el submenu se cierra antes de llegar. */
.nav .has-sub::after { content: ""; position: absolute; top: 100%; left: -.75rem; width: 240px; height: .75rem; display: none; }
.nav .has-sub:hover::after { display: block; }
.nav .submenu {
  position: absolute; top: calc(100% + .5rem); left: -.75rem;
  min-width: 240px; flex-direction: column; align-items: stretch; gap: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: .5rem; margin: 0; list-style: none;
  display: none; z-index: 110;
}
.nav .has-sub:hover > .submenu,
.nav .has-sub:focus-within > .submenu { display: flex; }
.nav .submenu a { display: block; padding: .6rem .75rem; border-radius: 10px; font-size: .92rem; }
.nav .submenu a:hover { background: var(--brand-soft); color: var(--brand); }
.nav .submenu a[aria-current="page"] { color: var(--brand); font-weight: 700; }

.nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: 0; cursor: pointer; padding: .5rem; min-width: 44px; min-height: 44px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.7rem; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn .icon { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn-wa { background: var(--wa); color: #05301b; box-shadow: 0 10px 26px rgba(37, 211, 102, .32); }
.btn-wa:hover { background: #1fbe5b; }
.btn-line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-line:hover { background: rgba(255, 255, 255, .12); }
.btn-brand { background: var(--brand); color: var(--sand); }
.btn-brand:hover { background: var(--brand-2); }
.btn-lg { padding: 1.15rem 2.3rem; font-size: 1.08rem; }
.btn-sm { padding: .5rem 1.1rem; font-size: .9rem; background: var(--brand); color: #fff; }
.btn-ghost { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn-ghost:hover { background: var(--brand-soft); }

.link-arrow { display: inline-block; margin-top: .5rem; font-weight: 700; text-decoration: none; }
.link-arrow::after { content: " \2192"; transition: .2s; display: inline-block; }
.link-arrow:hover::after { transform: translateX(4px); }

/* Hero */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(155deg, #235c46 0%, #183e30 45%, #0d251c 100%);
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(4rem, 10vw, 7rem);
}
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; }
.blob-1 { width: 480px; height: 480px; background: #2f7a5c; top: -180px; right: -120px; }
.blob-2 { width: 400px; height: 400px; background: #004734; bottom: -200px; left: -140px; opacity: .8; }

.hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 3.5rem; align-items: center; }
.hero-lead { font-size: 1.15rem; color: rgba(255, 255, 255, .9); max-width: 46ch; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.8rem 0 1rem; }
.hero-note { font-size: .92rem; color: rgba(255, 255, 255, .72); margin: 0; }
.hero-note a { color: var(--brand-soft); }

.hero-card {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius); padding: 2rem;
  backdrop-filter: blur(6px);
}
.hero-card h2 { font-size: 1.35rem; }
.hero-card p { color: rgba(255, 255, 255, .85); font-size: .96rem; }
.hero-card .link-arrow { color: var(--brand-soft); }

/* Listas con check */
.check { list-style: none; padding: 0; margin: 0; }
.check li { position: relative; padding: .35rem 0 .35rem 1.7rem; }
.check li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: 9px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); opacity: .65;
}
.hero-card .check li { color: #fff; font-size: .96rem; }
.cols { columns: 2; column-gap: 2rem; }

/* Secciones */
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.alt { background: var(--sand); }
.section-head { max-width: 680px; margin-bottom: 3rem; }
.section-head .sub { color: var(--muted); font-size: 1.08rem; }
.cta-inline { margin-top: 2.5rem; }

/* Cabecera y cuerpo de paginas legales */
.page-hero {
  background: linear-gradient(140deg, #235c46, #0d251c);
  color: #fff; padding: clamp(2.5rem, 7vw, 4.5rem) 0;
}
.page-hero h1 { margin: 0; font-size: clamp(2rem, 4.5vw, 3rem); }
.page-hero .sub { color: rgba(255, 255, 255, .85); margin: 1rem 0 0; max-width: 60ch; font-size: 1.08rem; }
.legal h2 { font-size: 1.3rem; color: var(--brand); margin-top: 2.8rem; }
.legal p { color: var(--muted); }
.legal .check li { color: var(--muted); }
.tabla-scroll { overflow-x: auto; margin: 1.5rem 0; }
.legal table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .92rem; }
.legal th, .legal td { text-align: left; padding: .75rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
.legal th { color: var(--brand); font-weight: 600; background: var(--sand); }

.destacado { background: var(--sand); border-left: 4px solid var(--brand); border-radius: var(--radius); padding: 1.5rem 1.75rem; margin: 2.5rem 0; }
.destacado-titulo { font-weight: 700; color: var(--brand); margin: 0 0 .75rem; font-size: 1.05rem; }
.destacado p:last-child { margin-bottom: 0; }
.destacado .check { margin-bottom: 0; }

.firma { display: flex; gap: 1.25rem; align-items: flex-start; background: var(--sand); border-radius: var(--radius); padding: 1.5rem; margin: 3rem 0 2rem; }
.firma img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.firma p { margin: 0 0 .35rem; }
.firma-nombre { font-weight: 700; color: var(--brand); }
.firma-cargo { font-size: .95rem; color: var(--muted); }
.firma-fecha { font-size: .85rem; color: var(--muted); }
.firma-aviso { font-size: .85rem; color: var(--muted); margin-top: .6rem; }

.referencias { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 2rem; }
.referencias summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.referencias ul { margin-top: 1rem; padding-left: 1.2rem; }
.referencias li { font-size: .88rem; color: var(--muted); margin-bottom: .6rem; }

/* Migas y texto editorial de paginas internas */
.crumbs { font-size: .85rem; color: rgba(255, 255, 255, .7); margin: 0 0 1.2rem; }
.crumbs a { color: var(--brand-soft); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.prose { max-width: 780px; }
.prose h2 { margin-top: 3.2rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2.2rem; color: var(--brand-deep); }
.prose p, .prose li { color: var(--muted); }
.prose .lead { font-size: 1.15rem; color: var(--ink); }

/* Dolores */
.pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.pain {
  margin: 0; padding: 1.2rem 1.4rem; border-radius: 14px;
  background: var(--brand-soft); font-weight: 600; color: var(--brand-deep);
  border-left: 4px solid var(--brand);
}

/* Especialidad */
.spotlight { background: var(--brand-deep); color: #fff; }
.spotlight h2 { color: #fff; }
.spotlight p { color: rgba(255, 255, 255, .82); }
.spotlight .link-arrow { color: var(--brand-soft); }
.spotlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.spotlight-support { display: grid; grid-template-columns: minmax(180px, .72fr) minmax(0, 1.28fr); gap: 1.5rem; align-items: center; }
.spotlight-photo { width: min(100%, 240px); min-width: 0; margin: 0; justify-self: center; }
.spotlight-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.spotlight-photo figcaption { margin-top: .7rem; color: rgba(255, 255, 255, .72); font-size: .84rem; line-height: 1.45; text-align: center; }
.spotlight-list { list-style: none; padding: 0; margin: 0; }
.spotlight-list li {
  display: flex; gap: 1rem; align-items: baseline;
  padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.spotlight-list li:last-child { border-bottom: 0; }
.spotlight-list span { color: var(--brand-soft); font-weight: 800; font-size: .85rem; letter-spacing: .05em; }

/* Tarjetas */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; box-shadow: var(--shadow-sm);
  transition: transform .28s, box-shadow .28s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card-icon {
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 1.25rem;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center;
}
.card-icon svg { width: 26px; height: 26px; }
.card .check li { color: var(--muted); font-size: .95rem; }

/* Pasos */
.steps { list-style: none; counter-reset: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.steps li { background: #fff; border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); }
.step-num {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand); color: var(--brand-soft); font-weight: 800; margin-bottom: 1.2rem;
}
.steps p { color: var(--muted); margin: 0; }

/* Acordeón */
.accordion { display: grid; gap: .75rem; }
details {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 0 1.5rem; box-shadow: var(--shadow-sm);
}
summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2rem 1.15rem 0;
  font-weight: 700; position: relative;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--brand); line-height: 1;
}
details[open] summary::after { content: "\2212"; }
details > *:not(summary) { padding-bottom: 1.4rem; margin-top: 0; color: var(--muted); }

/* Equipo */
.equipo-grid { display: grid; grid-template-columns: 300px 1fr; gap: 3.5rem; align-items: start; }
.equipo-foto { text-align: center; }
.avatar {
  width: 200px; height: 200px; margin: 0 auto 1.2rem; border-radius: 50%;
  object-fit: cover; display: block;
  box-shadow: var(--shadow);
}
/* Fichas de equipo en la portada */
.equipo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.persona {
  display: flex; flex-direction: column; text-align: center;
  background: #fff; border-radius: var(--radius); padding: 2.2rem 2rem;
  box-shadow: var(--shadow-sm);
}
.persona .avatar { width: 150px; height: 150px; margin-bottom: 1rem; }
.persona h3 { font-size: 1.4rem; margin-bottom: .3rem; }
.persona .role { font-size: .94rem; margin-bottom: .4rem; }
.persona .check { text-align: left; margin: 1.3rem 0 1.6rem; }
.persona .check li { color: var(--muted); font-size: .93rem; }
.persona .link-arrow { margin-top: auto; }
/* Fotografia dentro de texto: se limita el ancho porque son verticales. */
.foto { margin: 2.5rem auto; max-width: 440px; }
.foto-ancha { max-width: 780px; }
.foto img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.foto figcaption { font-size: .88rem; color: var(--muted); margin-top: .8rem; text-align: center; }

.youtube-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 780px;
  margin: 2.5rem auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--brand-deep);
  box-shadow: var(--shadow);
}
.youtube-facade > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.youtube-facade-button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  gap: .85rem;
  border: 0;
  padding: 1rem;
  /* Velo verde suave: da contraste al texto sin apagar la foto. */
  background: linear-gradient(rgba(18, 46, 35, .12), rgba(18, 46, 35, .48));
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
  cursor: pointer;
}
.youtube-facade-button:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: -8px; }
.youtube-facade iframe { width: 100%; height: 100%; border: 0; }
.youtube-play {
  width: 64px;
  height: 46px;
  display: block;
  margin: 0 auto;
  border-radius: 14px;
  background: #d92323;
  position: relative;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
}
.youtube-play::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 13px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
}
.col-num { font-size: .85rem; color: var(--muted); }
.role { color: var(--brand); font-weight: 700; margin-bottom: 1.5rem; }
.equipo-grid .check li { color: var(--muted); }

/* Opiniones */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
blockquote {
  margin: 0; background: var(--sand); border-radius: var(--radius);
  padding: 2rem; position: relative;
}
blockquote::before {
  content: "\201C"; font-size: 3.5rem; line-height: 1; color: var(--brand);
  opacity: .3; display: block; margin-bottom: .25rem;
}
blockquote p { font-style: italic; color: var(--ink); }
blockquote cite { font-style: normal; font-weight: 700; font-size: .92rem; color: var(--muted); }

/* Las estrellas sustituyen a la comilla decorativa: comunican la valoracion de un vistazo. */
.quotes blockquote::before { content: none; }
.quotes blockquote { display: flex; flex-direction: column; }
/* Alinea la firma abajo aunque las opiniones tengan distinta longitud. */
.quotes cite { margin-top: auto; padding-top: 1rem; }
.stars { font-style: normal; color: #e8a33d; letter-spacing: .14em; font-size: 1.05rem; margin: 0 0 .9rem; }
.stars-inline { color: #e8a33d; letter-spacing: .1em; }
.quotes-note { text-align: center; margin: 2.5rem 0 0; font-size: .92rem; color: var(--muted); }

/* Tarifas */
.pricing-section { background: var(--brand-deep); color: #fff; }
.pricing-section h2 { color: #fff; }
.pricing-section .sub { color: rgba(255, 255, 255, .8); }
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.5rem; max-width: 800px; margin-inline: auto; }
.price-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--radius); padding: 2.2rem 2rem;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2);
}
.price-card h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .7); }
.price-amount { font-size: 3.2rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; margin: 0; }
.price-amount span { font-size: 1.3rem; font-weight: 600; }
.price-per { font-size: .94rem; color: rgba(255, 255, 255, .75); margin: .5rem 0 1.6rem; }
.price-card .check { margin-bottom: 1.8rem; }
.price-card .check li { font-size: .94rem; color: rgba(255, 255, 255, .85); }
/* Alinea los botones aunque las tarjetas tengan distinto numero de ventajas. */
.price-card .btn { margin-top: auto; }

.price-card.featured { background: var(--sand); color: var(--ink); border-color: transparent; box-shadow: var(--shadow); }
.price-card.featured h3 { color: var(--muted); }
.price-card.featured .price-amount { color: var(--brand-deep); }
.price-card.featured .price-per, .price-card.featured .check li { color: var(--muted); }

.price-badge {
  position: absolute; top: -13px; left: 2rem;
  background: var(--accent); color: #fff; border-radius: 999px;
  padding: .3rem 1rem; font-size: .76rem; font-weight: 700; letter-spacing: .04em;
}
.price-note { text-align: center; max-width: 580px; margin: 2.5rem auto 0; font-size: .95rem; color: rgba(255, 255, 255, .75); }
.price-note a { color: var(--brand-soft); }

/* Ubicación */
.loc-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: stretch; }
.map iframe { width: 100%; height: 100%; min-height: 400px; border: 0; border-radius: var(--radius); }
/* El mapa no se carga hasta que hay consentimiento: hasta entonces se ve este bloque. */
.map-espera {
  height: 100%; min-height: 400px; border-radius: var(--radius);
  background: var(--brand-soft); color: var(--brand-deep);
  display: grid; place-content: center; justify-items: center;
  gap: .9rem; text-align: center; padding: 2rem;
}
.map-espera p { margin: 0; font-size: .95rem; }
.loc-info { background: var(--brand-soft); border-radius: var(--radius); padding: 2rem; }
.info { list-style: none; padding: 0; margin: 0; }
.info li { padding: .8rem 0; border-bottom: 1px solid rgba(24, 62, 48, .16); font-size: .96rem; }
.info li:last-child { border-bottom: 0; }
.info strong { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--brand); margin-bottom: .15rem; }

/* Banda CTA */
.cta-band {
  background: linear-gradient(140deg, #235c46, #0d251c);
  color: #fff; text-align: center; padding: clamp(3.5rem, 8vw, 5.5rem) 0;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .85); margin-bottom: 2rem; }
.cta-acciones { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Footer */
.site-footer { background: var(--brand-deep); color: rgba(255, 255, 255, .75); padding: 3rem 0 1.5rem; font-size: .92rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.footer-logo { margin-bottom: 1rem; }
.footer-logo img { height: 34px; width: auto; }
.site-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.social a { display: inline-flex; align-items: center; gap: .5rem; }
.social svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.site-footer nav { display: flex; flex-direction: column; gap: .5rem; }
.copy { text-align: center; margin: 2.5rem 0 0; font-size: .84rem; color: rgba(255, 255, 255, .5); }

/* WhatsApp flotante */
.wa-float {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 120;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--wa); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(37, 211, 102, .45);
  transition: transform .2s, bottom .3s;
}
.wa-float svg { width: 30px; height: 30px; fill: currentColor; }
.wa-float:hover { transform: scale(1.08); }

/* Se aparta mientras el aviso de cookies ocupa la parte inferior. La altura real la mide script.js. */
body:has(#cookie:not([hidden])) .wa-float { bottom: calc(var(--cookie-h, 6rem) + 2.5rem); }

/* Cookies */
.cookie {
  position: fixed; inset: auto 1rem 1rem 1rem; z-index: 130;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 1rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  max-width: 660px; margin-inline: auto;
}
.cookie[hidden] { display: none; }
.cookie p { margin: 0; font-size: .9rem; }
/* Rechazar debe ser tan accesible como aceptar. */
.cookie-acciones { display: flex; gap: .6rem; flex: none; }

/* Animaciones */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Sin JavaScript no hay observer que revele el contenido: se muestra todo. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* El menu pasa a hamburguesa antes que el resto del diseno: con 8 entradas deja de caber en una linea. */
@media (max-width: 1080px) {
  .nav-toggle { display: flex; }
  /* El menu se ancla bajo una cabecera pegajosa, asi que lo que no cabe en pantalla
     no se alcanza rodando la pagina: necesita su propio desplazamiento. */
  .nav {
    position: absolute; inset: 76px 0 auto 0; background: #fff;
    border-bottom: 1px solid var(--line); display: none;
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.25rem 1.25rem; }
  .nav li { border-top: 1px solid var(--line); }
  .nav a { display: block; padding: .95rem 0; }

  /* Dentro de la hamburguesa el submenu va sangrado y siempre visible: no tiene
     sentido un desplegable flotante cuando el menu ya esta desplegado. */
  .nav .has-sub > a::after { content: ""; }
  .nav .has-sub::after, .nav .has-sub:hover::after { display: none; }
  .nav .submenu {
    position: static; display: flex; min-width: 0;
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
    padding: 0 0 .5rem 1rem; margin: 0;
  }
  .nav .submenu a { padding: .7rem 0; font-size: .9rem; color: var(--muted); }
  .spotlight-grid-media { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .hero-grid, .spotlight-grid, .loc-grid, .equipo-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .cols { columns: 1; }
  /* Holgura para que el boton flotante no tape el cierre del pie. */
  .site-footer { padding-bottom: 5.5rem; }
}

@media (max-width: 600px) {
  .spotlight-support { grid-template-columns: 1fr; }
  .spotlight-photo { width: min(100%, 360px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover, .wa-float:hover { transform: none; }
  .wa-float { transition: none; }
}

/* Landing corta de Google Ads · ATM
   Todo va bajo .ads-page para no cambiar las páginas orgánicas. */
.ads-page .container { width: min(100% - 2rem, var(--max)); }
.ads-header .header-inner { min-height: 68px; }
.ads-header .logo { min-height: 48px; }
.ads-header-call {
  min-height: 48px; display: inline-flex; align-items: center; gap: .55rem;
  border: 2px solid var(--brand); border-radius: 999px; padding: .55rem 1rem;
  color: var(--brand); font-weight: 750; text-decoration: none;
}
.ads-header-call svg { width: 20px; height: 20px; fill: currentColor; }
.ads-call-short { display: none; }

.ads-hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(145deg, #235c46 0%, #183e30 52%, #0d251c 100%);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.ads-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
}
.ads-hero-copy { position: relative; z-index: 2; }
.ads-hero h1 { font-size: clamp(2.25rem, 5vw, 4rem); max-width: 16ch; }
.ads-hero-lead {
  max-width: 58ch; margin: 1rem 0 1.1rem;
  color: rgba(255,255,255,.92); font-size: clamp(1rem, 1.7vw, 1.2rem);
}
.ads-decision { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-bottom: 1.1rem; color: var(--brand-soft); }
.ads-decision strong { color: #fff; font-size: 1.08rem; }
.ads-decision span { border-left: 1px solid rgba(255,255,255,.35); padding-left: 1rem; }
.ads-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 .75rem; }
.ads-actions .btn { min-height: 52px; padding: .8rem 1.3rem; }
.ads-btn-book { background: var(--brand-soft); color: var(--brand-deep); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.ads-btn-book:hover { background: #fff5d8; }
.ads-book-note { margin: 0 0 .8rem; max-width: 58ch; color: rgba(255,255,255,.78); font-size: .88rem; }
.ads-proof { margin: 0; color: rgba(255,255,255,.88); font-size: .88rem; }
.ads-hero-media { margin: 0; position: relative; z-index: 1; }
.ads-hero-media img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% center;
  border-radius: 24px; border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 24px 60px rgba(0,0,0,.32);
}

.ads-confidence { background: var(--brand-soft); border-bottom: 1px solid var(--line); }
.ads-confidence ul {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; list-style: none; margin: 0; padding: 0;
}
.ads-confidence li {
  display: grid; align-content: center; min-height: 92px; padding: 1rem 1.25rem 1rem 2.2rem;
  color: var(--brand-deep); font-weight: 700; line-height: 1.35;
  border-right: 1px solid rgba(24,62,48,.16); position: relative;
}
.ads-confidence li:last-child { border-right: 0; }
.ads-confidence li::before {
  content: ""; position: absolute; left: .7rem; top: 50%; width: 9px; height: 5px;
  border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: translateY(-70%) rotate(-45deg);
}

.ads-section .section-head { margin-bottom: 2.2rem; }
.ads-symptoms {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  list-style: none; margin: 0; padding: 0;
}
.ads-symptoms li {
  min-height: 96px; display: flex; align-items: center;
  background: var(--sand); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.2rem 1.2rem 1.2rem 3rem; font-weight: 650; position: relative;
}
.ads-symptoms li::before {
  content: ""; position: absolute; left: 1.25rem; width: 10px; height: 6px;
  border-left: 3px solid var(--brand); border-bottom: 3px solid var(--brand);
  transform: rotate(-45deg);
}
.ads-block-note { max-width: 760px; margin: 1.6rem 0 0; color: var(--muted); }
.ads-action-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.ads-action-row .btn { min-height: 50px; }

.ads-review-section .tag { display: block; width: fit-content; }
.ads-review { margin: 2rem auto 0; background: #fff; box-shadow: var(--shadow-sm); }
.ads-review::before { content: none; }
.ads-review .stars { font-style: normal; }
.ads-review p:not(.stars) { font-size: 1.08rem; line-height: 1.7; }
.ads-review-section .quotes-note a { display: inline-flex; align-items: center; min-height: 44px; }

.ads-session-grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.ads-steps { list-style: none; padding: 0; margin: 1.8rem 0 0; counter-reset: pasos; }
.ads-steps li {
  counter-increment: pasos; position: relative; padding: 0 0 1.2rem 3.4rem;
  color: var(--muted);
}
.ads-steps li::before {
  content: counter(pasos); position: absolute; left: 0; top: -.2rem;
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800;
}
.ads-steps strong { color: var(--ink); }
/* La foto original es vertical (900x1200). Sin `height:auto` el atributo HTML
   `height` manda y ocupaba 1200 px: más de una pantalla de móvil. */
.ads-session-photo { margin: 0 auto; max-width: 340px; }
.ads-session-photo img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  object-position: center 22%; border-radius: var(--radius); box-shadow: var(--shadow);
}

.ads-team-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem; max-width: 860px; margin-inline: auto;
}
.ads-team-card {
  background: #fff; border-radius: var(--radius); padding: 2rem;
  box-shadow: var(--shadow-sm); text-align: center;
}
.ads-team-card .avatar { width: 132px; height: 132px; }
.ads-team-card h3 { font-size: 1.5rem; }
.ads-team-card .role { margin-bottom: 1rem; }
.ads-team-card .check { text-align: left; }
.ads-team-card .check li { color: var(--muted); }

.ads-pricing .section-head { margin-bottom: 2rem; }
.ads-price-card { max-width: 680px; margin-inline: auto; }
.ads-price-card .price-amount { font-size: clamp(3.4rem, 8vw, 5rem); }
.ads-price-card .check { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem 1rem; }
.ads-price-card .check li { padding-left: 1.45rem; }
.ads-bono { color: var(--muted); font-size: .92rem; margin: .25rem 0 0; }
.ads-bono span { white-space: nowrap; }
.ads-price-card .btn-ghost { color: var(--brand); border-color: var(--brand); }

.ads-location {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.ads-address { font-size: 1.08rem; margin: 1.2rem 0 1.5rem; }
.ads-location-list {
  list-style: none; margin: 0; padding: .5rem 1.8rem;
  background: var(--brand-soft); border-radius: var(--radius);
}
.ads-location-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(24,62,48,.16); }
.ads-location-list li:last-child { border-bottom: 0; }
.ads-location-list span { color: var(--muted); text-align: right; }

.ads-faq .accordion { display: grid; gap: .75rem; }
.ads-final-cta .cta-acciones .btn { min-height: 52px; }
.ads-footer { padding-bottom: 2rem; }
.ads-footer nav a { min-height: 44px; display: flex; align-items: center; }
.ads-footer .footer-inner > div > p a { min-height: 44px; display: inline-flex; align-items: center; }

.ads-sticky { display: none; }

@media (max-width: 900px) {
  .ads-confidence ul { grid-template-columns: repeat(2, 1fr); }
  .ads-confidence li:nth-child(2) { border-right: 0; }
  .ads-confidence li:nth-child(-n+2) { border-bottom: 1px solid rgba(24,62,48,.16); }
  .ads-symptoms { grid-template-columns: repeat(2, 1fr); }
  .ads-session-grid, .ads-location { grid-template-columns: 1fr; }
  .ads-session-photo { max-width: 300px; }
  .ads-price-card .check { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .ads-page { padding-bottom: 66px; }
  .ads-header .header-inner { min-height: 62px; }
  .ads-header .logo img { height: 36px; }
  .ads-header-call { min-width: 48px; padding: .55rem .8rem; }
  .ads-call-short { display: inline; }
  .ads-call-full { display: none; }

  .ads-hero { padding: 1.25rem 0 1.4rem; }
  .ads-hero-grid { display: block; }
  .ads-hero h1 { font-size: clamp(1.9rem, 9vw, 2.35rem); max-width: 12ch; }
  .ads-hero .tag { margin-bottom: .6rem; font-size: .66rem; }
  .ads-hero-lead { font-size: .96rem; line-height: 1.45; margin: .65rem 0 .7rem; max-width: 34ch; }
  .ads-decision { display: block; margin-bottom: .7rem; font-size: .86rem; line-height: 1.4; }
  .ads-decision strong, .ads-decision span { display: block; }
  .ads-decision span { border-left: 0; padding-left: 0; }
  .ads-actions { display: grid; grid-template-columns: 1fr; gap: .55rem; margin-bottom: .55rem; max-width: 340px; }
  .ads-actions .btn { min-height: 48px; padding: .65rem .9rem; font-size: .92rem; }
  .ads-book-note { font-size: .76rem; line-height: 1.35; margin-bottom: .5rem; max-width: 42ch; }
  .ads-proof { font-size: .76rem; line-height: 1.35; max-width: 43ch; }
  .ads-hero-media {
    position: absolute; inset: 0; opacity: .13; width: 100%; max-width: none;
  }
  .ads-hero-media img { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; object-position: 68% center; }
  .ads-hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(13,37,28,.98) 0%, rgba(24,62,48,.92) 62%, rgba(24,62,48,.78) 100%);
  }
  .ads-hero-copy { z-index: 2; }

  .ads-confidence li { min-height: 78px; padding: .8rem .8rem .8rem 2rem; font-size: .86rem; }
  .ads-confidence li::before { left: .55rem; }
  .ads-symptoms { grid-template-columns: 1fr; }
  .ads-symptoms li { min-height: 0; padding-block: 1rem; }
  /* En móvil la foto vertical comía pantalla y empujaba el CTA. Apaisada y
     recortada al gesto ocupa un cuarto de lo que ocupaba, sin perder contexto. */
  .ads-session-photo { max-width: none; margin-top: 1.8rem; }
  .ads-session-photo img { aspect-ratio: 16 / 10; object-position: center 26%; }
  .ads-action-row, .ads-final-cta .cta-acciones { display: grid; grid-template-columns: 1fr; }
  .ads-action-row .btn, .ads-final-cta .btn { width: 100%; }
  .ads-team-grid { grid-template-columns: 1fr; }
  .ads-location-list li { display: block; }
  .ads-location-list span { display: block; text-align: left; }

  .ads-sticky {
    position: fixed; display: grid; grid-template-columns: .85fr 1.15fr;
    left: .65rem; right: .65rem; bottom: .65rem; z-index: 125;
    gap: .5rem; padding: .45rem; border: 1px solid var(--line);
    border-radius: 16px; background: rgba(255,255,255,.96);
    box-shadow: var(--shadow); transition: bottom .3s;
  }
  .ads-sticky a {
    min-height: 48px; display: grid; place-items: center; border-radius: 12px;
    font-weight: 800; text-decoration: none; text-align: center; padding: .45rem;
  }
  .ads-sticky-wa { background: var(--wa); color: #05301b; }
  .ads-sticky-book { background: var(--brand); color: #fff; }
  /* Mientras se decide sobre las cookies ya están visibles los CTA del hero.
     Ocultar la barra evita que se amontone sobre el aviso o sobre el contenido. */
  body:has(#cookie:not([hidden])) .ads-sticky { display: none; }
  .ads-footer { padding-bottom: 5.5rem; }
}

@media (max-width: 380px) {
  .ads-page .container { width: min(100% - 1.5rem, var(--max)); }
  .ads-hero h1 { font-size: 1.8rem; }
  .ads-hero-lead { font-size: .9rem; }
  .ads-actions .btn { font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ads-sticky { transition: none; }
}