/*
Theme Name:  Physo
Description: Theme personalizado para Physo — Centro de movimiento, salud y bienestar.
Version:     1.0.0
Author:      Ezequiel Magi
Text Domain: physo
*/

/* ============================================================
   FUENTES LOCALES
   ============================================================ */
@font-face {
    font-family: 'TT Commons';
    src: url('assets/fonts/tt-commons/TT Commons Light.woff2') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'TT Commons';
    src: url('assets/fonts/tt-commons/TT Commons Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'TT Commons';
    src: url('assets/fonts/tt-commons/TT Commons Medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'TT Commons';
    src: url('assets/fonts/tt-commons/TT Commons Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Unbounded';
    src: url('assets/fonts/unbounded/Unbounded-Light.woff2') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Unbounded';
    src: url('assets/fonts/unbounded/Unbounded-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Unbounded';
    src: url('assets/fonts/unbounded/Unbounded-Medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Unbounded';
    src: url('assets/fonts/unbounded/Unbounded-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================
   TOKENS DE DISEÑO
   ============================================================ */
:root {
  --physo-azul:          #2B3F6C;
  --physo-crema:         #F5F0E8;
  --physo-naranja:       #E8845A;
  --physo-naranja-hover: #D46A3A;

  /* Azul intenso del rediseño: header y overlay del hero.
     Aproximado del mockup del cliente; reemplazar por el hex de marca exacto. */
  --physo-azul-header:   #27408B;
  --physo-azul-hero:     #1E3577;
  /* Naranja del CTA del hero, más saturado que --physo-naranja. */
  --physo-naranja-vivo:  #E06D06;
  --physo-naranja-vivo-hover: #C45F05;
  /* Gris muy claro y frío para secciones que no llevan el crema. */
  --physo-gris-claro:    #F7F8FA;
  /* Tinte suave del naranja, para fondos amplios como las cards. */
  --physo-naranja-claro: #FBE4D0;
  --physo-blanco:        #FFFFFF;
  --physo-texto:         #2C2C2C;
  --physo-texto-claro:   #666666;
  --physo-borde:         #E0E0E0;
  /* Crema verdoso de marca. Antes se llamaba --physo-fondo-header, de
     cuando el header era claro; hoy lo usa el fondo del formulario. */
  --physo-crema-verde:   #EEF0D3;

  --physo-font-titulo:   'TT Commons', system-ui, sans-serif;
  --physo-font-cuerpo:   'TT Commons', system-ui, sans-serif;
  --physo-font-numeros:  'Unbounded', system-ui, sans-serif;

  --physo-size-xs:   0.75rem;
  --physo-size-sm:   0.875rem;
  --physo-size-base: 1rem;
  --physo-size-lg:   1.125rem;
  --physo-size-xl:   1.25rem;
  --physo-size-2xl:  1.5rem;
  --physo-size-3xl:  1.875rem;
  --physo-size-4xl:  2.25rem;
  --physo-size-5xl:  3rem;

  --physo-space-sm:  1rem;
  --physo-space-md:  2rem;
  --physo-space-lg:  4rem;
  /* Espaciado vertical de las secciones. Bajó de 6rem a pedido del
     cliente, para que la transición entre bloques sea más fluida. */
  --physo-space-xl:  4.5rem;

  --physo-container: 1200px;
  --physo-radius:    8px;
  --physo-radius-lg: 16px;

  --physo-shadow:    0 4px 20px rgba(0,0,0,0.08);
  --physo-shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--physo-font-cuerpo);
  font-size: var(--physo-size-base);
  color: var(--physo-texto);
  background: var(--physo-blanco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--physo-naranja); text-decoration: none; transition: color .2s; }
a:hover { color: var(--physo-naranja-hover); }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5 {
  font-family: var(--physo-font-titulo);
  font-weight: 700;
  line-height: 1.2;
  color: var(--physo-texto);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-content { flex: 1; }
.physo-container {
  width: 100%;
  max-width: var(--physo-container);
  margin-inline: auto;
  padding-inline: var(--physo-space-md);
}
.physo-section { padding-block: var(--physo-space-xl); }
.physo-section--crema { background: var(--physo-crema); }
.physo-section--claro { background: var(--physo-gris-claro); }
.physo-section--azul  { background: var(--physo-azul); color: var(--physo-blanco); }

/* ============================================================
   BOTONES
   ============================================================ */
.physo-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .875rem 2rem;
  font-family: var(--physo-font-cuerpo);
  font-size: var(--physo-size-base);
  font-weight: 600;
  border-radius: var(--physo-radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.physo-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.15);
  opacity: 0;
  transition: opacity .2s;
}
.physo-btn:hover::after { opacity: 1; }

.physo-btn--primary { background: var(--physo-naranja); color: var(--physo-blanco); }
.physo-btn--secondary { background: var(--physo-azul); color: var(--physo-blanco); }
.physo-btn--primary:hover {
  background: var(--physo-naranja-hover);
  color: var(--physo-blanco);
  transform: translateY(-1px);
  box-shadow: var(--physo-shadow);
}
.physo-btn--outline {
  background: transparent;
  color: var(--physo-naranja);
  border-color: var(--physo-naranja);
}
.physo-btn--outline:hover { background: var(--physo-naranja); color: var(--physo-blanco); }

/* Naranja fuerte, el mismo del CTA del hero. */
.physo-btn--naranja {
  background: var(--physo-naranja-vivo);
  color: var(--physo-blanco);
  font-weight: 600;
  gap: .6rem;
}
.physo-btn--naranja:hover {
  background: var(--physo-naranja-vivo-hover);
  color: var(--physo-blanco);
  transform: translateY(-1px);
  box-shadow: var(--physo-shadow);
}
.physo-btn__flecha { transition: transform .2s ease; }
.physo-btn--naranja:hover .physo-btn__flecha { transform: translateX(3px); }

.physo-btn--hero {
  background: var(--physo-naranja-vivo);
  color: #FFFFFF;
  font-family: var(--physo-font-cuerpo);
  /* Un punto por encima del resto de los botones: es el CTA principal. */
  font-size: 1.125rem;
  font-weight: 600;
  padding: 1.05rem 1.85rem;
  border-radius: var(--physo-radius);
  letter-spacing: .01em;
  gap: .85rem;
}
.physo-btn--hero:hover {
  background: var(--physo-naranja-vivo-hover);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: var(--physo-shadow-lg);
}
/* Flecha dentro de un círculo, como en el mockup. */
.physo-btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  font-size: .95rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .2s ease, background .2s ease;
}
.physo-btn--hero:hover .physo-btn__arrow {
  background: rgba(255,255,255,.34);
  transform: translateX(3px);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--physo-azul-header);
  border-bottom: 1px solid transparent;
  height: 80px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled {
  border-bottom-color: rgba(255,255,255,.18);
  box-shadow: 0 2px 20px rgba(0,0,0,.18);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.site-logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-logo img {
  width: 200px;
  display: block;
}

.site-logo__icon {
  width: 32px;
  height: 32px;
  background: var(--physo-azul);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.site-logo__icon::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--physo-blanco);
}
.site-logo__text {
  font-family: var(--physo-font-titulo);
  font-size: var(--physo-size-xl);
  font-weight: 700;
  color: var(--physo-azul);
  letter-spacing: -.02em;
}
.nav-primary .menu { display: flex; align-items: center; gap: .25rem; }
.nav-primary .menu-item { position: relative; }
.nav-primary .menu-item > a {
  display: block;
  padding: .5rem .875rem;
  font-size: var(--physo-size-base);
  font-weight: 500;
  color: rgba(255,255,255,.92);
  border-radius: var(--physo-radius);
  transition: background .15s, color .15s;
  text-decoration: none;
  white-space: nowrap;
}
.nav-primary .menu-item > a:hover,
.nav-primary .menu-item.current-menu-item > a {
  background: rgba(255,255,255,.12);
  color: var(--physo-blanco);
}

/* Ítems con submenú: cursor + flecha, como el "Servicios ⌄" del mockup. */
.nav-primary .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: .4em;
  height: .4em;
  margin-left: .45em;
  vertical-align: .12em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.nav-primary .menu-item-has-children:hover > a::after { transform: rotate(225deg); }

.nav-primary .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--physo-azul-header);
  border-radius: var(--physo-radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
  padding: .5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 110;
}
.nav-primary .menu-item-has-children:hover > .sub-menu,
.nav-primary .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-primary .sub-menu .menu-item > a { white-space: normal; }

.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: var(--physo-radius);
  padding: .5rem .75rem;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--physo-blanco);
  line-height: 1;
  transition: border-color .15s, background .15s;
}
.nav-toggle:hover { border-color: var(--physo-blanco); background: rgba(255,255,255,.12); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--physo-naranja-vivo);
  color: var(--physo-blanco);
  padding-block: var(--physo-space-lg);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr;
  gap: var(--physo-space-md);
  margin-bottom: var(--physo-space-lg);
}
.site-footer__logo { margin-bottom: 1.5rem; }
.site-footer__logo img { width: 190px; display: block; }
.site-footer__desc {
  font-size: var(--physo-size-xl);
  font-weight: 700;
  line-height: 1.35;
  max-width: 26ch;
  margin-bottom: 1.5rem;
}

.site-footer__heading {
  color: var(--physo-blanco);
  font-size: var(--physo-size-base);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  opacity: 1;
  margin-bottom: 1rem;
}
.site-footer__nav a {
  display: block;
  font-size: var(--physo-size-sm);
  color: rgba(255,255,255,.9);
  padding-block: .4rem;
  transition: color .15s;
}
.site-footer__nav a:hover { color: var(--physo-blanco); text-decoration: underline; }

.site-footer__contacto { display: flex; flex-direction: column; gap: .85rem; }
.site-footer__contacto li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: var(--physo-size-sm);
  color: rgba(255,255,255,.9);
  line-height: 1.45;
}
.site-footer__contacto svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: .1rem; }
.site-footer__contacto a { color: inherit; text-decoration: underline; }
.site-footer__contacto a:hover { color: var(--physo-blanco); }

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.35);
  padding-top: var(--physo-space-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--physo-space-sm);
  font-size: var(--physo-size-xs);
  color: rgba(255,255,255,.9);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: .35rem .75rem; }
.site-footer__legal a { color: inherit; text-decoration: underline; }
.site-footer__legal a:hover { color: var(--physo-blanco); }
/* Separador entre enlaces legales, salvo antes del primero. */
.site-footer__legal a + a::before {
  content: '|';
  margin-right: .75rem;
  text-decoration: none;
  display: inline-block;
}

.physo-social { display: flex; gap: .75rem; }
.physo-social a {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--physo-blanco);
  transition: opacity .15s;
}
.physo-social a:hover { opacity: .75; }
.physo-social svg { width: 100%; height: 100%; }

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--physo-naranja); outline-offset: 2px; }

/* ============================================================
   EFECTOS GLOBALES
   ============================================================ */
.physo-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s ease, transform .7s ease;
}
.physo-reveal.is-visible { opacity: 1; transform: translateY(0); }
.physo-reveal-group > *:nth-child(1) { transition-delay: 0s; }
.physo-reveal-group > *:nth-child(2) { transition-delay: .1s; }
.physo-reveal-group > *:nth-child(3) { transition-delay: .2s; }
.physo-reveal-group > *:nth-child(4) { transition-delay: .3s; }

.physo-card { transition: transform .25s ease, box-shadow .25s ease; }
.physo-card:hover { transform: translateY(-6px); box-shadow: var(--physo-shadow-lg); }

.physo-img-zoom { overflow: hidden; border-radius: var(--physo-radius-lg); }
.physo-img-zoom img { transition: transform .5s ease; }
.physo-img-zoom:hover img { transform: scale(1.05); }

/* ============================================================
   HERO
   ============================================================ */
.physo-hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--physo-azul-hero);
}
.physo-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.physo-hero__bg img,
.physo-hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* La foto ya viene con el tinte azul aplicado, así que el overlay solo
   agrega el contraste que necesita el texto: fuerte a la izquierda,
   donde va el titular, y suave a la derecha para no tapar la escena. */
.physo-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to right,
      rgba(30,53,119,.90) 0%,
      rgba(30,53,119,.72) 42%,
      rgba(30,53,119,.34) 100%
    ),
    rgba(30,53,119,.48);
}
.physo-hero .physo-container {
  position: relative;
  z-index: 2;
  width: 100%;
}
.physo-hero__content { max-width: 580px; }
.physo-hero__eyebrow {
  font-family: var(--physo-font-cuerpo);
  font-size: var(--physo-size-sm);
  font-weight: 600;
  color: var(--physo-naranja);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 1.25rem;
  opacity: 0;
  animation: heroFadeUp .6s ease .1s forwards;
}
.physo-hero__title {
  font-family: var(--physo-font-titulo);
  font-size: 2.83rem;
  font-weight: 700;
  color: var(--physo-blanco);
  line-height: 1.15;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: heroFadeUp .6s ease .25s forwards;
}
.physo-hero__text {
  font-family: var(--physo-font-cuerpo);
  font-size: 1.125rem;
  font-weight: 400;
  color: rgba(255,255,255,.92);
  line-height: 1.55;
  margin-bottom: 2.5rem;
  max-width: 520px;
  opacity: 0;
  animation: heroFadeUp .6s ease .4s forwards;
}
/* Frases destacadas dentro del párrafo del hero. */
.physo-hero__text strong {
  font-weight: 700;
  color: var(--physo-blanco);
}
.physo-hero .physo-btn--hero {
  opacity: 0;
  animation: heroFadeUp .6s ease .55s forwards;
}
.physo-hero__deco {
  position: absolute;
  bottom: -80px;
  right: 8%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.16);
  z-index: 2;
  pointer-events: none;
}
.physo-hero__deco::after {
  content: '';
  position: absolute;
  inset: 35px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.1);
}
/* Marca de agua del logo, arriba a la izquierda, como en el mockup. */
.physo-hero::before {
  content: '';
  position: absolute;
  top: -40px;
  left: -60px;
  width: 520px;
  height: 200px;
  background: url('assets/images/logo-footer.png') no-repeat left top;
  background-size: contain;
  opacity: .045;
  z-index: 2;
  pointer-events: none;
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.physo-section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--physo-space-lg);
}
/*
.physo-section-header h2 { font-size: 28px; font-weight: 800; color: var(--physo-azul); margin-bottom: 1rem; }
.physo-section--azul .physo-section-header h2 { color: var(--physo-blanco); }
.physo-section--azul .physo-section-header p { color: rgba(255,255,255,.75); }

*/
.physo-eyebrow {
  font-size: var(--physo-size-3xl);
  font-weight: 700;
  color: var(--physo-azul);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .75rem;
}

/* ============================================================
   SELECTOR DE PERFIL
   ============================================================ */
.physo-selector {
  position: relative;
  overflow: hidden;
  padding-bottom: calc(var(--physo-space-xl) + 10px);
}

.physo-selector__deco-cruz {
  position: absolute;
  /* Apenas recortado por el borde, para que se reconozca la forma. */
  bottom: -46px;
  right: -46px;
  width: 240px;
  height: 240px;
  color: var(--physo-naranja-vivo);
  opacity: .3;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.physo-selector__h2{
  font-size: 34px;
  font-weight: 700;
  color: var(--physo-azul);
  margin-bottom: .75rem;
}

.physo-selector__p{
  font-size: 20px;
  color: var(--physo-texto-claro);
  margin-bottom: 1.5rem;

}

.physo-selector__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--physo-space-md);
  /* Más anchas que antes (900px) para darles protagonismo. */
  max-width: 1040px;
  margin: 0 auto;
  overflow: visible;
}

.physo-selector__card {
  border-radius: var(--physo-radius-lg);
  overflow: hidden;
  background: var(--physo-blanco);
  box-shadow: var(--physo-shadow);
}

.physo-selector__card-image {
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-radius: var(--physo-radius-lg) var(--physo-radius-lg) 0 0;
}

.physo-selector__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.physo-selector__card-body {
  padding: 1.75rem;
  /* Empuja el botón al fondo para que las dos cards lo alineen
     aunque un título ocupe más líneas que el otro. */
  display: flex;
  flex-direction: column;
  flex: 1;
}
.physo-selector__card-body .physo-btn { margin-top: auto; align-self: center; }

.physo-selector__card-body h3 {
  font-family: var(--physo-font-titulo);
  font-size: var(--physo-size-lg);
  font-weight: 700;
  color: var(--physo-azul);
  margin-bottom: .75rem;
  line-height: 1.3;
}

.physo-selector__card-body p {
  font-size: var(--physo-size-base);
  color: var(--physo-texto-claro);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.physo-selector__card {
  position: relative;
  border-radius: var(--physo-radius-lg);
  overflow: visible;
  background: var(--physo-blanco);
  box-shadow: var(--physo-shadow);
  display: flex;
  flex-direction: column;
}

/* Asegurar que la imagen no se salga del borde redondeado */
.physo-selector__card-image {
  border-radius: var(--physo-radius-lg) var(--physo-radius-lg) 0 0;
  overflow: hidden;
}

/* ── Disparador de video sobre el poster ────────────────── */
.physo-video-trigger {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--physo-borde);
  cursor: pointer;
  overflow: hidden;
}
.physo-video-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.physo-video-trigger:hover img,
.physo-video-trigger:focus-visible img { transform: scale(1.05); }

.physo-video-trigger__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 42px;
  border-radius: 10px;
  background: var(--physo-blanco);
  color: var(--physo-azul);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  transition: transform .2s ease, background .2s ease;
}
.physo-video-trigger__play svg { width: 15px; height: 17px; margin-left: 2px; }
.physo-video-trigger:hover .physo-video-trigger__play {
  transform: translate(-50%, -50%) scale(1.08);
}
.physo-video-trigger:focus-visible {
  outline: 3px solid var(--physo-naranja-vivo);
  outline-offset: -3px;
}
/* Play más grande en las cards del selector: son la puerta de entrada a
   cada servicio y tienen que leerse como interactivas. */
.physo-selector__card-image .physo-video-trigger__play {
  width: 68px;
  height: 52px;
  border-radius: 12px;
}
.physo-selector__card-image .physo-video-trigger__play svg { width: 18px; height: 21px; }

/* ── Reproductor flotante ───────────────────────────────── */
.physo-video-modal {
  width: min(920px, 92vw);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  /* Centrado explícito: el diálogo vive en el top layer y no hereda
     el centrado de ningún contenedor. */
  margin: auto;
  position: fixed;
  inset: 0;
  height: fit-content;
}
.physo-video-modal::backdrop {
  background: rgba(10,16,38,.82);
}
.physo-video-modal__video {
  width: 100%;
  max-height: 80vh;
  display: block;
  border-radius: var(--physo-radius-lg);
  background: #000;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
/* Dentro del cuadro y no encima: fuera se salía de pantalla cuando el
   diálogo quedaba pegado al borde superior. */
.physo-video-modal__close {
  position: absolute;
  top: .625rem;
  right: .625rem;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(12,16,32,.62);
  color: var(--physo-blanco);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.physo-video-modal__close:hover { background: rgba(12,16,32,.85); }



/* Elementos decorativos */
.physo-selector__deco {
  position: absolute;
  font-size: 3rem;
  opacity: .12;
  color: var(--physo-azul);
  pointer-events: none;
  user-select: none;
}

.physo-selector__deco--left {
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 5rem;
}

.physo-selector__deco--right {
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 4rem;
}

@media (max-width: 768px) {
  .physo-selector__grid      { grid-template-columns: 1fr; }
  .physo-selector__deco      { display: none; }
  .physo-selector__deco-cruz { display: none; }
  .physo-selector__h2        { font-size: 1.625rem; }
  .physo-selector__p         { font-size: 1rem; }
}

/* ============================================================
   TESTIMONIOS
   ============================================================ */
/*.physo-testimonios__titulo { color: var(--physo-blanco) !important; font-size: var(--physo-size-3xl); }*/
.physo-testimonios { overflow-x: hidden; position: relative; }

/* Marca de agua circular del fondo. */
.physo-testimonios::before {
  content: '';
  position: absolute;
  top: -180px;
  left: -140px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  border: 90px solid rgba(255,255,255,.028);
  pointer-events: none;
}

/* Cabecera a la izquierda y flechas a la derecha, en la misma fila. */
.physo-testimonios__cabecera {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--physo-space-md);
  margin-bottom: 2.5rem;
}
.physo-section-header-testimonios{
  margin-bottom: 0;
  text-align: left;
}
.physo-section-header-testimonios h4 { color: var(--physo-blanco) !important; font-size: 2rem; }
.physo-section-header-testimonios p { color: var(--physo-blanco) !important; font-size: 1.2rem; font-weight: 300; }

.physo-testimonio__card {
  position: relative;
  color: var(--physo-texto);
  background: var(--physo-gris-claro);
  border: 0;
  border-radius: var(--physo-radius-lg);
  padding: 2.25rem 1.75rem 1.75rem;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}
/* Los fondos se alternan por posición: blanco, beige y naranja claro.
   Al ir por nth-child, agregar o quitar testimonios no rompe el ciclo. */
.physo-testimonios .physo-slider__slide:nth-child(3n+1) .physo-testimonio__card { background: var(--physo-blanco); }
.physo-testimonios .physo-slider__slide:nth-child(3n+2) .physo-testimonio__card { background: var(--physo-crema); }
.physo-testimonios .physo-slider__slide:nth-child(3n)   .physo-testimonio__card { background: var(--physo-naranja-claro); }

.physo-testimonio__comilla {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.5rem;
  line-height: .6;
  color: var(--physo-azul);
  opacity: .18;
  display: block;
  margin-bottom: .5rem;
}

.physo-testimonio__texto {
  color: inherit;
  font-size: var(--physo-size-base);
  line-height: 1.65;
  font-style: normal;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.physo-testimonio__persona {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: auto;
}
.physo-testimonio__foto {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Sustituto mientras no haya foto de la persona. */
.physo-testimonio__foto--iniciales {
  background: var(--physo-azul);
  color: var(--physo-blanco);
  font-size: var(--physo-size-sm);
  font-weight: 700;
  letter-spacing: .02em;
}
.physo-testimonio__identidad {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
.physo-testimonio__nombre {
  color: var(--physo-azul);
  font-weight: 700;
  font-size: var(--physo-size-base);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 0;
  line-height: 1.25;
}
.physo-testimonio__cargo {
  color: var(--physo-texto-claro);
  font-size: var(--physo-size-sm);
  line-height: 1.25;
}

/* ============================================================
   SLIDER
   ============================================================ */
.physo-slider { position: relative; overflow: visible; padding: 0; z-index: 1; }
/* flex-start y no stretch: cada card se queda con el alto de su
   contenido en vez de estirarse a la más larga de la fila. */
.physo-slider__track { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); will-change: transform; margin: 0 -.75rem; align-items: flex-start; }
.physo-slider__slide {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  padding: 0 .75rem;
  box-sizing: border-box;
  display: flex;
  transition: opacity .2s ease;
  opacity: .28;
}
.physo-slider__slide.is-centered { opacity: 1; }

/* Par de flechas arriba a la derecha, junto al título. */
.physo-slider__nav { display: flex; gap: .5rem; flex-shrink: 0; }
.physo-slider__prev,
.physo-slider__next {
  background: rgba(255,255,255,.16);
  border: none;
  border-radius: var(--physo-radius);
  width: 40px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.05rem;
  transition: background .2s, color .2s, opacity .2s;
  color: var(--physo-blanco);
}
.physo-slider__next { background: var(--physo-blanco); color: var(--physo-azul); }
.physo-slider__prev:hover { background: rgba(255,255,255,.3); }
.physo-slider__next:hover { background: rgba(255,255,255,.85); }
.physo-slider__prev:disabled,
.physo-slider__next:disabled { opacity: .35; cursor: default; }

/* ============================================================
   ESTADÍSTICAS
   ============================================================ */
.physo-stats{
  background-color: var(--physo-crema);
  /* +100px porque physo-stats__foto--b se corre esa misma medida hacia abajo
     (ver más abajo): se reserva el mismo espacio de siempre debajo de ella,
     sin tocar el padding del collage (eso movería también su punto de anclaje). */
  padding-bottom: calc(var(--physo-space-xl) + 100px);
}

/* Collage a la izquierda, título y cifras a la derecha. */
.physo-stats__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--physo-space-lg);
  align-items: center;
}

.physo-stats__collage { position: relative; padding-bottom: 3.5rem; }
.physo-stats__foto {
  display: block;
  height: auto;
  border-radius: 18px;
}
.physo-stats__foto--a { width: 80%; }
.physo-stats__foto--b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 48%;
  /* El borde blanco separa una foto de la otra donde se superponen. */
  border: 6px solid var(--physo-blanco);
  border-radius: 20px;
  transform: translate(-50px, 100px);
}

.physo-stats__heading {
  font-size: calc(var(--physo-size-3xl) * 1.25);
  font-weight: 700;
  color: var(--physo-naranja-vivo);
  line-height: 1.25;
  margin: 0 0 var(--physo-space-md);
  max-width: 100%;
}

.physo-stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
.physo-stat { text-align: left; }
.physo-stat__number {
  font-family: var(--physo-font-numeros);
  font-size: calc(var(--physo-size-3xl) * 1.25);
  font-weight: 700;
  color: var(--physo-azul);
  display: block;
  line-height: 1;
  margin-bottom: .5rem;
}
/* El "+" lo inyecta el contador desde main.js. */
.physo-stat__signo { color: var(--physo-naranja-vivo); margin-right: .15em; }
.physo-stat__label { font-size: 17.5px; font-weight: 400; color: var(--physo-texto-claro); line-height: 1.5; text-align: left; }

/* ============================================================
   ESPACIO
   ============================================================ */
.physo-espacio {
  position: relative;
  overflow: hidden;
  background: var(--physo-naranja-vivo);
}

/* Asterisco decorativo, abajo a la izquierda. */
.physo-espacio__asterisco {
  position: absolute;
  left: -30px;
  bottom: 2rem;
  width: 130px;
  height: 130px;
  color: var(--physo-azul);
  pointer-events: none;
  z-index: 0;
}

/* Cabecera */
.physo-espacio__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--physo-space-md);
  margin-bottom: var(--physo-space-md);
}
.physo-espacio__heading {
  font-size: calc(var(--physo-size-3xl) * 1.25);
  font-weight: 700;
  color: var(--physo-blanco);
  line-height: 1.25;
  max-width: 572px;
}

/* Flechas sobre el naranja: la de avanzar va en azul. */
.physo-espacio .physo-slider__nav { margin-top: .25rem; }
.physo-espacio .physo-slider__prev,
.physo-espacio .physo-slider__next {
  width: 42px;
  height: 38px;
  background: rgba(0,0,0,.16);
  color: var(--physo-blanco);
}
.physo-espacio .physo-slider__next { background: var(--physo-azul); }
.physo-espacio .physo-slider__prev:hover { background: rgba(0,0,0,.3); }
.physo-espacio .physo-slider__next:hover { background: #1e2d56; }

/* Carrusel */
.physo-espacio__slider {
  position: relative;
  z-index: 1;
  margin-bottom: var(--physo-space-md);
  /* Recorta al ancho del contenedor: sin esto las fotos siguientes
     asoman hasta el borde de la pantalla. */
  overflow: hidden;
}
/* El ancho tiene que coincidir con el data-visibles que lee el JS. */
.physo-espacio__slider .physo-slider__slide {
  flex: 0 0 50%;
  max-width: 50%;
  opacity: 1;
}
/* Las fotos ya traen las esquinas redondeadas recortadas en el archivo,
   así que no se les aplica border-radius: dibujaría una segunda curva. */
.physo-espacio__img img {
  width: 100%;
  height: auto;
  display: block;
}

/* Caption */
.physo-espacio__caption {
  position: relative;
  z-index: 1;
  text-align: end;
  font-size: calc(var(--physo-size-base) * 1.25);
  color: rgba(255,255,255,.9);
  line-height: 1.7;
  max-width: 640px;
  margin-left: auto;
}
.physo-espacio__caption strong {
  color: var(--physo-blanco);
  font-weight: 700;
}

@media (max-width: 768px) {
  .physo-espacio__heading  { font-size: calc(var(--physo-size-2xl) * 1.25); }
  .physo-espacio__header   { flex-direction: column; gap: .75rem; }
  .physo-espacio__caption  { text-align: left; }
  /* Hay que repetirlo con la misma especificidad que la regla de
     desktop, si no aquella gana y siguen entrando dos fotos. */
  .physo-espacio__slider .physo-slider__slide { flex: 0 0 100%; max-width: 100%; }
  /* En mobile el texto ocupa todo el ancho y el asterisco se le encima. */
  .physo-espacio__asterisco { display: none; }
}

/* ============================================================
   FAQ
   ============================================================ */
/* El h2 caía en el estilo genérico de encabezados (~24px) y quedaba por
   debajo del resto de las secciones. Se iguala al de "Queremos entender
   tu punto de partida", que es el encabezado centrado equivalente.
   Va acotado a esta sección: el genérico .physo-section-header h2 tiene
   más especificidad que las clases del formulario y se las pisaría. */
.physo-faq-section .physo-section-header h2 {
  font-size: 34px;
  color: var(--physo-azul);
  margin-bottom: .75rem;
}
.physo-faq-section .physo-section-header p {
  font-size: 20px;
  color: var(--physo-texto-claro);
}

.physo-faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
.physo-faq__item {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--physo-borde);
  overflow: hidden;
  transition: border-color .2s;
}
.physo-faq__question {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1.25rem 1.25rem;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-size: var(--physo-size-base);
  font-weight: 600;
  color: var(--physo-texto);
  transition: color .2s;
}
.physo-faq__item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--physo-azul);
  transition: color .2s;
}
.physo-faq__item-text { flex: 1; }
.physo-faq__toggle {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--physo-naranja);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background .2s;
}
.physo-faq__plus  { display: block; }
.physo-faq__minus { display: none; }
.physo-faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
/* El padding lateral va en todos los párrafos, pero el de arriba y el
   de abajo sólo en los extremos: si no, una respuesta de dos párrafos
   abre un hueco doble en el medio. */
.physo-faq__answer p {
  padding: 0 1.25rem;
  color: var(--physo-texto-claro);
  line-height: 1.8;
  font-size: var(--physo-size-sm);
}
.physo-faq__answer p:first-child { padding-top: .25rem; }
.physo-faq__answer p:last-child  { padding-bottom: 1.25rem; }
.physo-faq__answer p + p         { margin-top: .75rem; }

.physo-faq__lista {
  margin: .5rem 0 0;
  padding: 0 1.25rem 1.25rem 2.4rem;
  list-style: disc;
  color: var(--physo-texto-claro);
  line-height: 1.8;
  font-size: var(--physo-size-sm);
}
.physo-faq__lista li { margin-bottom: .6rem; }
.physo-faq__lista li:last-child { margin-bottom: 0; }
.physo-faq__lista li::marker { color: var(--physo-naranja-vivo); }
.physo-faq__lista strong { color: var(--physo-azul); font-weight: 700; }
/* Con lista, el párrafo introductorio no lleva el aire del final. */
.physo-faq__answer p:has(+ .physo-faq__lista) { padding-bottom: 0; }

/* Estado abierto */
.physo-faq__item.is-open {
  border-color: var(--physo-naranja);
  background: #fff5ee;
}
.physo-faq__item.is-open .physo-faq__question { color: var(--physo-naranja); }
.physo-faq__item.is-open .physo-faq__item-icon { color: var(--physo-naranja); }
.physo-faq__item.is-open .physo-faq__toggle { background: var(--physo-naranja); }
.physo-faq__item.is-open .physo-faq__plus  { display: none; }
.physo-faq__item.is-open .physo-faq__minus { display: block; }

/* Mobile */
@media (max-width: 640px) {
  .physo-faq { grid-template-columns: 1fr; }
}

/* ============================================================
   FORMULARIO
   ============================================================ */
/* ── Ubicación ──────────────────────────────────────────── */
.physo-ubicacion { background: var(--physo-azul); }
.physo-ubicacion__grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: var(--physo-space-md);
  align-items: stretch;
}
.physo-ubicacion__titulo {
  font-size: var(--physo-size-2xl);
  font-weight: 700;
  color: var(--physo-blanco);
  margin-bottom: .5rem;
}
.physo-ubicacion__bajada {
  font-size: var(--physo-size-base);
  color: rgba(255,255,255,.85);
  margin-bottom: var(--physo-space-md);
}
.physo-ubicacion__video {
  border-radius: var(--physo-radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.physo-ubicacion__video .physo-video-trigger { background: rgba(255,255,255,.1); }
.physo-ubicacion__mapa {
  border-radius: var(--physo-radius-lg);
  overflow: hidden;
  line-height: 0;
}
.physo-ubicacion__mapa iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  display: block;
}

@media (max-width: 768px) {
  .physo-ubicacion__grid { grid-template-columns: 1fr; }
  .physo-ubicacion__mapa iframe { min-height: 280px; }
}

/* ── Contacto ───────────────────────────────────────────── */
.physo-contacto {
  position: relative;
  overflow: hidden;
  background: var(--physo-crema-verde);
}
.physo-contacto__anillos {
  position: absolute;
  top: -60px;
  right: -70px;
  width: 260px;
  height: 260px;
  color: rgba(224,109,6,.22);
  pointer-events: none;
}
.physo-contacto__asterisco {
  position: absolute;
  left: -40px;
  bottom: 3rem;
  width: 150px;
  height: 150px;
  color: rgba(43,63,108,.28);
  pointer-events: none;
}
.physo-contacto__card {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  background: var(--physo-blanco);
  border: 1.5px solid var(--physo-azul);
  border-radius: var(--physo-radius-lg);
  padding: 2.75rem 2.5rem;
}
.physo-contacto__titulo {
  font-size: var(--physo-size-2xl);
  font-weight: 700;
  color: var(--physo-azul);
  margin-bottom: .75rem;
}
.physo-contacto__bajada {
  font-size: var(--physo-size-base);
  color: var(--physo-texto-claro);
  line-height: 1.6;
  margin: 0;
}
.physo-contacto__card .physo-section-header { margin-bottom: 1.75rem; }

.physo-form { max-width: 760px; margin: 0 auto; }
.physo-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
.physo-form__group { display: flex; flex-direction: column; gap: .5rem; }
.physo-form__group--full { grid-column: 1 / -1; }
.physo-form__group label { font-size: var(--physo-size-sm); font-weight: 600; color: var(--physo-texto); }
.physo-form__group input,
.physo-form__group textarea {
  padding: .875rem 1rem;
  border: 1.5px solid var(--physo-borde);
  border-radius: var(--physo-radius);
  font-family: var(--physo-font-cuerpo);
  font-size: var(--physo-size-base);
  color: var(--physo-texto);
  background: var(--physo-blanco);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.physo-form__group input:focus,
.physo-form__group textarea:focus { border-color: var(--physo-naranja); box-shadow: 0 0 0 3px rgba(232,132,90,.15); }
.physo-form__submit { text-align: center; margin-top: var(--physo-space-md); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .site-footer__grid    { grid-template-columns: 1fr 1fr; }
  .physo-stats__inner   { grid-template-columns: 1fr; gap: var(--physo-space-md); }
  .physo-stats__collage { max-width: 520px; }
  /* En una sola columna, el corrimiento de escritorio hace que la foto
     superpuesta invada el título de abajo: se cancela en este layout,
     y el padding extra que reservaba ese espacio en la sección también se revierte. */
  .physo-stats__foto--b { transform: none; }
  .physo-stats          { padding-bottom: var(--physo-space-xl); }
  .physo-slider__slide {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 768px) {
  :root { --physo-space-xl: 2.5rem; --physo-space-lg: 2rem; }

  .physo-container { padding-inline: 1.25rem; }

  /* Nav */
  .nav-primary { display: none; }
  .nav-primary.is-open {
    display: flex; flex-direction: column;
    position: absolute; top: 80px; left: 0; right: 0;
    background: var(--physo-azul-header);
    border-bottom: 1px solid rgba(255,255,255,.18);
    padding: var(--physo-space-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    z-index: 99;
  }
  .nav-primary.is-open .menu { flex-direction: column; align-items: stretch; gap: .25rem; }
  .nav-primary.is-open .menu-item > a { padding: .75rem 1rem; }
  .nav-toggle { display: block; }

  /* En mobile el submenú se muestra desplegado, no flotante. */
  .nav-primary.is-open .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 0 0 0 .75rem;
    min-width: 0;
  }

  /* Hero */
  .physo-hero            { min-height: 420px; }
  .physo-hero__title     { font-size: 1.75rem; }
  .physo-hero__text      { font-size: 1rem; margin-bottom: 1.75rem; }
  .physo-hero__content   { max-width: 100%; }
  .physo-btn--hero       { width: 100%; justify-content: center; }
  .physo-hero::before    { width: 260px; height: 100px; top: -18px; left: -28px; }
  .physo-hero__deco      { width: 200px; height: 200px; bottom: -60px; right: -40px; }

  /* Testimonios */
  .physo-section-header-testimonios h4 { font-size: 1.5rem; }
  .physo-section-header-testimonios p  { font-size: 1rem; }
  /* Las flechas ya no flotan sobre las cards: bajan debajo del título. */
  .physo-testimonios__cabecera {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .physo-slider          { padding: 0; }
  .physo-slider__track   { margin: 0 -.5rem; }
  .physo-slider__slide {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 .5rem;
  }
  .physo-testimonios::before { display: none; }

  /* Stats */
  /* Una sola columna: a 390px las descripciones no entran en dos. */
  .physo-stats__grid     { grid-template-columns: 1fr; gap: 1.5rem; }
  .physo-stats__heading  { font-size: calc(var(--physo-size-2xl) * 1.25); }
  .physo-stats__collage  { padding-bottom: 2.5rem; }

  /* Grids */
  .physo-selector__grid  { grid-template-columns: 1fr; }
  .physo-form__grid      { grid-template-columns: 1fr; }
  .physo-contacto__card  { padding: 2rem 1.25rem; }
  .physo-contacto__anillos { width: 170px; height: 170px; top: -40px; right: -50px; }

  /* Footer */
  .site-footer__grid     { grid-template-columns: 1fr; gap: var(--physo-space-md); }
  .site-footer__bottom   { flex-direction: column; gap: .5rem; text-align: center; }
  .site-footer__legal    { justify-content: center; gap: .5rem 1rem; }
  /* Al envolverse, el separador quedaba colgando al inicio de la línea. */
  .site-footer__legal a + a::before { content: none; }
}