/* =========================================================
   CACTUS · style.css (versión completa)
   ========================================================= */

:root {
  --verde-cactus: #3F5E3A;
  --verde-salvia: #8FA57F;
  --arena: #E9DCC3;
  --crema: #F7F1E5;
  --terracota: #C2623F;
  --terracota-profunda: #8E4128;
  --carbon: #2B2A26;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: 'Nunito Sans', sans-serif;
  background: var(--crema);
  color: var(--carbon);
  min-height: 100vh;
}

/* ---------- Pantalla de carga ---------- */
#loader {
  position: fixed;
  inset: 0;
  background: var(--crema);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
  text-align: center;
  z-index: 100;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

#loader.oculto {
  opacity: 0;
  visibility: hidden;
}

.suelo {
  width: 140px;
  height: 6px;
  background: var(--arena);
  border-radius: 3px;
}

.cactus-svg { width: 150px; height: auto; overflow: visible; }

.cactus-cuerpo,
.cactus-brazo {
  fill: var(--verde-cactus);
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: crecer 1.6s ease-out forwards;
}

.cactus-brazo.izq { animation-delay: 0.9s; transform: scaleY(0); }
.cactus-brazo.der { animation-delay: 1.3s; transform: scaleY(0); }
.cactus-cuerpo { transform: scaleY(0); }

.espinas line {
  stroke: var(--arena);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  animation: aparecer 0.6s ease 2s forwards;
}

.flor {
  fill: var(--terracota);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: florecer 0.9s cubic-bezier(.3,1.6,.5,1) 2.4s forwards;
}

@keyframes crecer { to { transform: scaleY(1); } }
@keyframes aparecer { to { opacity: 1; } }
@keyframes florecer { to { transform: scale(1); } }

.loader-lema {
  font-family: 'Fraunces', serif;
  font-size: 1.6rem;
  color: var(--verde-cactus);
  opacity: 0;
  animation: aparecer 1s ease 1.2s forwards;
}

.loader-firma {
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terracota);
  opacity: 0;
  animation: aparecer 1s ease 1.8s forwards;
}

/* ---------- Menú fijo ---------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(247, 241, 229, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--arena);
}

.nav {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--verde-cactus);
  text-decoration: none;
}

.logo span { color: var(--terracota); }

.cactus-mini { height: 34px; margin-right: 0.5rem; }

.menu {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
}

.menu a {
  color: var(--carbon);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.2s;
}

.menu a:hover { color: var(--terracota); }
.menu a.actual { color: var(--terracota); }

@media (min-width: 821px) {
  .menu li:not(.idiomas-btn) a {
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
  }

  .menu li:not(.idiomas-btn) a.actual {
    border-bottom-color: var(--terracota);
  }
}

.idiomas-btn {
  display: flex;
  gap: 0.3rem;
}

.idiomas-btn button {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--verde-salvia);
  border-radius: 999px;
  background: transparent;
  color: var(--verde-cactus);
  cursor: pointer;
  transition: all 0.2s;
}

.idiomas-btn button:hover { background: var(--arena); }

.idiomas-btn button.activo {
  background: var(--verde-cactus);
  border-color: var(--verde-cactus);
  color: var(--crema);
}

.hamburguesa {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--verde-cactus);
  cursor: pointer;
}

@media (max-width: 820px) {
  .hamburguesa { display: block; }

  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--crema);
    border-bottom: 1px solid var(--arena);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }

  .menu.abierto { max-height: 400px; }

  .menu li { width: 100%; text-align: center; }
  .menu a { display: block; padding: 0.9rem; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-principal {
  background: var(--terracota);
  color: var(--crema);
  border: 2px solid var(--terracota);
}

.btn-principal:hover {
  background: var(--terracota-profunda);
  border-color: var(--terracota-profunda);
}

.btn-secundario {
  background: transparent;
  color: var(--verde-cactus);
  border: 2px solid var(--verde-cactus);
}

.btn-secundario:hover {
  background: var(--verde-cactus);
  color: var(--crema);
}

/* ---------- Inicio ---------- */
.hero {
  --escena-h: clamp(190px, 32vh, 340px);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1.5rem calc(var(--escena-h) * 0.6 + 2rem);
  background: linear-gradient(180deg, var(--crema) 0%, var(--arena) 100%);
}

.hero-contenido {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.hero-etiqueta {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--terracota);
  margin-bottom: 1.2rem;
}

.hero h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  line-height: 1.1;
  color: var(--verde-cactus);
  margin-bottom: 1.6rem;
}

.hero-analogia {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--carbon);
  margin-bottom: 1.2rem;
}

.hero-mision {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--carbon);
  opacity: 0.85;
  margin-bottom: 2.2rem;
}

.hero-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* Amanecer en el desierto */
.escena {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--escena-h);
  z-index: 1;
  pointer-events: none;
}

.escena svg {
  display: block;
  width: 100%;
  height: 100%;
}

.duna-1 { fill: #DBC9A5; }
.duna-2 { fill: #CDB88F; }

.duna-1,
.duna-2 {
  opacity: 0;
  transition: opacity 1.4s ease;
}

.sol {
  transform: translateY(125px);
  transition: transform 3.6s cubic-bezier(.22, .65, .3, 1) 0.6s;
}

.sol-brillo { fill: var(--terracota); opacity: 0.14; }
.sol-anillo { fill: var(--terracota); opacity: 0.26; }
.sol-disco  { fill: var(--terracota); }

.hc-cuerpo,
.hc-brazo {
  fill: var(--verde-cactus);
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
  transition: transform 1.3s ease-out 2.2s;
}

.hc-brazo.izq { transition-delay: 3s; }
.hc-brazo.der { transition-delay: 3.3s; }

.hc-flor {
  fill: var(--terracota);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.9s cubic-bezier(.3, 1.6, .5, 1) 4.2s;
}

.escena.amanece .duna-1,
.escena.amanece .duna-2 { opacity: 1; }

.escena.amanece .sol { transform: none; }

.escena.amanece .hc-cuerpo,
.escena.amanece .hc-brazo { transform: scaleY(1); }

.escena.amanece .hc-flor { transform: scale(1); }

/* ---------- Secciones (base común) ---------- */
.seccion {
  padding: 6rem 0;
}

.contenedor {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.seccion-cabecera {
  margin-bottom: 4.5rem;
}

.seccion-etiqueta {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--terracota);
  margin-bottom: 1rem;
}

.seccion h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.15;
  color: var(--verde-cactus);
  max-width: 760px;
  margin-bottom: 1.5rem;
}

.seccion-intro {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.2rem, 2.5vw, 1.45rem);
  line-height: 1.55;
  max-width: 640px;
}

/* Grilla de dos columnas */
.perfil,
.alineado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 3rem;
}

.alineado > * { grid-column: 2; }

.perfil {
  padding-top: 2.5rem;
  border-top: 1px solid var(--verde-salvia);
}

.perfil + .perfil { margin-top: 4.5rem; }

.rol {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--terracota);
  margin: 0 0 0.6rem;
}

.perfil-lateral h3 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 3.5vw, 2.2rem);
  line-height: 1.15;
  color: var(--verde-cactus);
}

.perfil-texto p {
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 640px;
  margin-bottom: 1.2rem;
}

.perfil-texto .destacado {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--verde-cactus);
  margin-bottom: 1.6rem;
}

.enlace-wiki {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--verde-cactus);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--verde-salvia);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}

.enlace-wiki:hover {
  color: var(--terracota);
  border-color: var(--terracota);
}

/* ---------- Hitos ---------- */
.hitos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 3.5rem 0;
  border-top: 1px solid var(--verde-salvia);
  border-bottom: 1px solid var(--verde-salvia);
}

.hitos li {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 2rem 1.8rem;
}

.hitos li:first-child { padding-left: 0; }

.hitos li + li { border-left: 1px solid var(--verde-salvia); }

.hito-cifra {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--terracota);
}

.hito-texto {
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ---------- Foto ---------- */
.foto-bloque { margin: 0 0 4.5rem; }

.foto-maca {
  aspect-ratio: 2 / 1;
  border-radius: 12px;
  background-color: var(--arena);
  background-image: url('img/maca-futbol.jpg?v=2');
  background-size: cover;
  background-position: center 30%;
}

.foto-bloque figcaption {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* ---------- Quiénes somos: el camino de dos historias ---------- */
#quienes-somos { background: var(--crema); }

.camino {
  position: relative;
  --eje: calc(100% / 3 + 0.5rem);
}

.camino-hilos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hilo {
  position: absolute;
  top: 0;
  width: 2px;
  height: 0;
  border-radius: 1px;
  transform-origin: top;
  transform: scaleY(0);
  will-change: transform;
}

.hilo-a {
  left: calc(var(--eje) - 8px);
  background: var(--verde-cactus);
}

.hilo-b {
  left: calc(var(--eje) + 6px);
  background: var(--terracota);
}

.union {
  position: absolute;
  top: 0;
  left: calc(var(--eje) - 10px);
  width: 20px;
  height: 40px;
  overflow: visible;
}

.union path {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s ease;
}

.union-a { stroke: var(--verde-cactus); }
.union-b { stroke: var(--terracota); }

.camino.unido .union path { stroke-dashoffset: 0; }

.camino .hitos,
.camino .foto-bloque {
  position: relative;
  z-index: 1;
  background: var(--crema);
}

.camino .perfil { position: relative; }

.camino .perfil::before {
  content: "";
  position: absolute;
  top: -6.5px;
  z-index: 1;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--crema);
  border: 2px solid var(--verde-salvia);
  transition: background 0.5s ease, border-color 0.5s ease,
              transform 0.5s cubic-bezier(.3, 1.6, .5, 1);
}

.camino .perfil:nth-of-type(1)::before { left: calc(var(--eje) - 13px); }
.camino .perfil:nth-of-type(2)::before { left: calc(var(--eje) + 1px); }
.camino .perfil:nth-of-type(3)::before { left: calc(var(--eje) - 6px); }

.camino .perfil.encendido::before {
  background: var(--terracota);
  border-color: var(--terracota);
  transform: scale(1.25);
}

.camino .perfil:nth-of-type(1).encendido::before {
  background: var(--verde-cactus);
  border-color: var(--verde-cactus);
}

.camino .perfil:nth-of-type(3).encendido::before {
  border-color: var(--verde-cactus);
  transform: scale(1.5);
}

/* ---------- Equipo ---------- */
.equipo-banda {
  background: var(--arena);
  padding-bottom: 4.5rem;
}

.equipo-banda .seccion-cabecera { margin-bottom: 3rem; }

.valores { margin: 0; }

.valores .hito-cifra {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  color: var(--verde-cactus);
}

/* ---------- Cierre de Quiénes somos ---------- */
.cierre-seccion { padding: 4rem 0 5rem; }

.cierre > .cactus-grande {
  grid-column: 1;
  align-self: start;
}

.cierre p {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.4;
  color: var(--verde-cactus);
  max-width: 640px;
}

.cierre cite {
  display: block;
  margin-top: 1.4rem;
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--terracota);
}

/* ---------- Qué hacemos ---------- */
.que-hacemos-banda { background: var(--arena); }

.areas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
  margin-top: 2rem;
}

.areas li {
  padding: 1.4rem 0 1.8rem;
  border-top: 1px solid var(--verde-salvia);
}

.area-num {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--terracota);
  margin-bottom: 0.6rem;
}

.areas h4 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--verde-cactus);
  margin-bottom: 0.5rem;
}

.perfil-texto .areas p {
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: none;
  margin: 0;
}

/* ---------- Programas ---------- */
.programas-banda {
  --verde-profundo: #2F4A2C;
  background: var(--verde-profundo);
  color: var(--crema);
}

.programas-banda .seccion-etiqueta { color: var(--arena); }
.programas-banda h2 { color: var(--crema); }
.programas-banda .seccion-intro { color: var(--crema); }

.programas-banda .perfil { border-top-color: rgba(247, 241, 229, 0.25); }
.programas-banda .rol { color: var(--arena); }
.programas-banda .perfil-lateral h3 { color: var(--crema); }
.programas-banda .perfil-texto .destacado { color: var(--crema); }
.programas-banda .btn { margin-top: 0.8rem; }

.seccion-texto {
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 640px;
  margin-top: 1.2rem;
  color: var(--arena);
}

/* Pelota que rueda */
.pelota-pista {
  position: relative;
  height: 46px;
  margin-bottom: 3.5rem;
  border-bottom: 1px dashed rgba(247, 241, 229, 0.35);
}

.pelota {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 44px;
  display: block;
  transition: left 2.8s cubic-bezier(.22, .7, .25, 1),
              transform 2.8s cubic-bezier(.22, .7, .25, 1);
}

.pelota-pista.en-vista .pelota {
  left: calc(100% - 44px);
  transform: rotate(1080deg);
}

/* Líneas que se dibujan */
.cifras li::before,
.barreras li::before,
.pilares li::before,
.vias li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--arena);
  transition: width 1.3s ease 0.3s;
}

.vias li::before { background: var(--verde-salvia); }

.cifras li.visible::before,
.barreras li.visible::before,
.pilares li.visible::before,
.vias li.visible::before { width: 100%; }

/* Cifras */
.cifras {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin: 0 0 5rem;
}

.cifras li {
  position: relative;
  padding-top: 1.5rem;
}

.cifra-num {
  display: block;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  line-height: 1;
  color: var(--arena);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.7rem;
}

.cifra-texto {
  display: block;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Dato destacado */
.dato {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.6rem;
  margin: 0 0 2rem;
  padding: 1.6rem 0;
  border-top: 1px solid rgba(247, 241, 229, 0.25);
  border-bottom: 1px solid rgba(247, 241, 229, 0.25);
}

.dato-num {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(3rem, 7vw, 4.6rem);
  line-height: 1;
  color: var(--arena);
  font-variant-numeric: tabular-nums;
}

.perfil-texto .dato p {
  flex: 1 1 240px;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
}

.dato small {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--arena);
}

.dato small a {
  color: var(--arena);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.dato small a:hover { color: var(--crema); }

/* Barreras */
.barreras { list-style: none; }

.barreras li {
  position: relative;
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 1rem;
  padding: 1.6rem 0 1.8rem;
}

.barrera-num {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  color: var(--arena);
  transition: transform 0.3s ease;
}

.barreras li:hover .barrera-num { transform: translateX(6px); }

.barreras h4 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--crema);
  margin-bottom: 0.5rem;
}

.perfil-texto .barreras p {
  margin: 0;
  max-width: none;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--arena);
}

/* Pilares */
.pilares {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
}

.pilares li {
  position: relative;
  padding-top: 1.5rem;
}

.pilar-tag {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--arena);
  margin-bottom: 0.6rem;
}

.pilares h4 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--crema);
  margin-bottom: 0.6rem;
}

.perfil-texto .pilares p {
  margin: 0;
  max-width: none;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--arena);
}

/* ---------- Sumate / Contacto ---------- */
#contacto {
  background: var(--crema);
  padding-bottom: 0;
}

.vias {
  list-style: none;
  border-bottom: 1px solid var(--verde-salvia);
  margin-bottom: 4.5rem;
}

.vias li { position: relative; }

.via {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: 2.2rem 0;
  text-decoration: none;
  color: inherit;
}

.via-num {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--terracota);
}

.via-cuerpo h3 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.2;
  color: var(--verde-cactus);
  margin-bottom: 0.5rem;
  transition: color 0.25s ease, transform 0.3s ease;
}

.via-cuerpo p {
  font-size: 1rem;
  line-height: 1.65;
  max-width: 620px;
}

.via-flecha {
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  line-height: 1;
  color: var(--terracota);
  transition: transform 0.3s ease;
}

.via:hover .via-cuerpo h3 {
  color: var(--terracota);
  transform: translateX(6px);
}

.via:hover .via-flecha { transform: translateX(10px); }

.via:focus-visible {
  outline: 2px solid var(--terracota);
  outline-offset: 4px;
}

.contacto-mail { margin-bottom: 1.6rem; }

.mail-grande {
  display: inline-block;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 6vw, 3.6rem);
  line-height: 1.2;
  color: var(--verde-cactus);
  text-decoration: none;
  overflow-wrap: anywhere;
  padding-bottom: 0.35rem;
  background:
    linear-gradient(var(--terracota), var(--terracota)) 0 100% / 0% 3px no-repeat,
    linear-gradient(var(--verde-salvia), var(--verde-salvia)) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.5s ease, color 0.3s ease;
}

.mail-grande:hover,
.mail-grande:focus-visible {
  color: var(--terracota-profunda);
  background-size: 100% 3px, 100% 1px;
}

.redes {
  font-size: 1.05rem;
  line-height: 1.6;
}

.redes a {
  color: var(--verde-cactus);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--verde-salvia);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}

.redes a:hover {
  color: var(--terracota);
  border-color: var(--terracota);
}

/* Paisaje de cactus */
.paisaje {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 5rem;
  border-bottom: 3px solid var(--verde-salvia);
}

.paisaje .cactus-vivo { margin-bottom: -5px; }

.paisaje .c-s { height: 70px; }
.paisaje .c-m { height: 110px; }
.paisaje .c-l { height: 160px; }

.paisaje .tono .c-cuerpo,
.paisaje .tono .c-brazo { fill: var(--verde-salvia); }

.paisaje .cactus-vivo .c-cuerpo { transition-delay: var(--d, 0s); }
.paisaje .cactus-vivo .c-brazo.izq { transition-delay: calc(var(--d, 0s) + 0.6s); }
.paisaje .cactus-vivo .c-brazo.der { transition-delay: calc(var(--d, 0s) + 0.9s); }
.paisaje .cactus-vivo .c-flor { transition-delay: calc(var(--d, 0s) + 1.6s); }

/* ---------- Cactus que crecen (logo, cierre, paisaje) ---------- */
.cactus-vivo {
  overflow: visible;
  width: auto;
}

.cactus-grande { height: 170px; }

.cactus-vivo .c-cuerpo,
.cactus-vivo .c-brazo {
  fill: var(--verde-cactus);
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
  transition: transform 1.2s ease-out;
}

.cactus-vivo .c-brazo.izq { transition-delay: 0.6s; }
.cactus-vivo .c-brazo.der { transition-delay: 0.9s; }

.cactus-vivo .c-flor {
  fill: var(--terracota);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.8s cubic-bezier(.3, 1.6, .5, 1) 1.6s;
}

.cactus-vivo .c-espinas line {
  stroke: var(--arena);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.6s ease 1.4s;
}

.cactus-vivo .c-suelo {
  stroke: var(--verde-salvia);
  stroke-width: 3;
  stroke-linecap: round;
}

.cactus-vivo.crecido .c-cuerpo,
.cactus-vivo.crecido .c-brazo { transform: scaleY(1); }

.cactus-vivo.crecido .c-flor { transform: scale(1); }
.cactus-vivo.crecido .c-espinas line { opacity: 1; }

/* ---------- Aparición suave al hacer scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* =========================================================
   Celular y tablet (siempre al final, para que gane)
   ========================================================= */
@media (max-width: 820px) {
  .seccion { padding: 4rem 0; }
  .seccion-cabecera { margin-bottom: 3rem; }

  .perfil,
  .alineado {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .alineado > * { grid-column: 1; }

  .hitos { grid-template-columns: 1fr; margin: 2.5rem 0; }
  .hitos li,
  .hitos li:first-child { padding: 1.5rem 0; }
  .hitos li + li {
    border-left: none;
    border-top: 1px solid var(--verde-salvia);
  }

  .foto-maca { aspect-ratio: 4 / 3; }
  .foto-bloque { margin-bottom: 3rem; }

  .camino-hilos,
  .camino .perfil::before { display: none; }

  .equipo-banda { padding-bottom: 3rem; }
  .cierre-seccion { padding: 3rem 0 3.5rem; }
  .cactus-grande { height: 120px; }

  .areas { grid-template-columns: 1fr; }

  .hero { padding-bottom: calc(var(--escena-h) + 1rem); }

  .pelota-pista { margin-bottom: 2.5rem; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 3.5rem; }
  .pilares { grid-template-columns: 1fr; }

  .via { grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 1rem; padding: 1.7rem 0; }
  .via-flecha { font-size: 1.5rem; }
  .vias { margin-bottom: 3.5rem; }
  .paisaje { margin-top: 3.5rem; }
}

@media (max-width: 600px) {
  .paisaje .c-s { height: 45px; }
  .paisaje .c-m { height: 65px; }
  .paisaje .c-l { height: 90px; }
}

/* Para quienes tienen desactivadas las animaciones en su dispositivo */
@media (prefers-reduced-motion: reduce) {
  .cactus-vivo .c-cuerpo,
  .cactus-vivo .c-brazo,
  .cactus-vivo .c-flor { transform: none !important; transition: none; }
  .cactus-vivo .c-espinas line { opacity: 1; transition: none; }

  .reveal { opacity: 1; transform: none; transition: none; }

  .duna-1, .duna-2 { opacity: 1; transition: none; }
  .sol { transform: none; transition: none; }
  .hc-cuerpo, .hc-brazo, .hc-flor { transform: none; transition: none; }

  .pelota { transition: none; }

  .cifras li::before,
  .barreras li::before,
  .pilares li::before,
  .vias li::before { width: 100%; transition: none; }

  .union path,
  .camino .perfil::before { transition: none; }
}
/* ---------- Inicio: la pelota en la duna ---------- */
.escena { --t-balon: 3.6s; }

.balon-cuerpo {
  fill: var(--crema);
  stroke: var(--verde-cactus);
  stroke-width: 1.3;
}

.balon-parche { fill: var(--verde-cactus); }

.balon-costura line {
  stroke: var(--verde-cactus);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.balon-bote { opacity: 0; }

.balon-sombra {
  fill: var(--carbon);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.balon-giro {
  transform-box: fill-box;
  transform-origin: center;
}

.escena.amanece .balon-avance {
  animation: balon-avance 2.4s cubic-bezier(.2, .7, .3, 1) var(--t-balon) forwards;
}

.escena.amanece .balon-bote {
  animation: balon-bote 1.9s linear var(--t-balon) forwards;
}

.escena.amanece .balon-giro {
  animation: balon-giro 2.4s cubic-bezier(.2, .7, .3, 1) var(--t-balon) forwards;
}

.escena.amanece .balon-sombra {
  animation: balon-sombra 1.9s linear var(--t-balon) forwards;
}

/* Llega rodando desde la derecha */
@keyframes balon-avance {
  from { transform: translateX(70px); }
  to   { transform: translateX(0); }
}

/* Cae y rebota tres veces */
@keyframes balon-bote {
  0%   { transform: translateY(-260px); opacity: 1; animation-timing-function: ease-in; }
  42%  { transform: translateY(0);      opacity: 1; animation-timing-function: ease-out; }
  62%  { transform: translateY(-44px);  opacity: 1; animation-timing-function: ease-in; }
  78%  { transform: translateY(0);      opacity: 1; animation-timing-function: ease-out; }
  90%  { transform: translateY(-12px);  opacity: 1; animation-timing-function: ease-in; }
  100% { transform: translateY(0);      opacity: 1; }
}

@keyframes balon-giro {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-720deg); }
}

/* La sombra se achica cuando la pelota está en el aire */
@keyframes balon-sombra {
  0%   { opacity: 0;    transform: scale(0.4); }
  42%  { opacity: 0.3;  transform: scale(1); }
  62%  { opacity: 0.18; transform: scale(0.7); }
  78%  { opacity: 0.3;  transform: scale(1); }
  90%  { opacity: 0.24; transform: scale(0.88); }
  100% { opacity: 0.3;  transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .escena.amanece .balon-avance,
  .escena.amanece .balon-bote,
  .escena.amanece .balon-giro,
  .escena.amanece .balon-sombra { animation: none; }

  .balon-bote { opacity: 1; }
  .balon-sombra { opacity: 0.3; }
}
/* ---------- Inicio: deportes en la duna ---------- */
.obj-cae,
.obj-sombra { opacity: 0; }

.obj-sombra {
  fill: var(--carbon);
  transform-box: fill-box;
  transform-origin: center;
}

.obj-giro,
.obj-asienta { transform-box: fill-box; }

.obj-giro { transform-origin: center; }
.obj-asienta { transform-origin: 50% 100%; }

/* Secuencia: arranca después de la pelota de fútbol */
.escena.amanece .obj-cae {
  animation: obj-caer var(--dur, 1.8s) linear
             calc(var(--t-balon, 3.6s) + var(--t, 0s)) forwards;
}

.escena.amanece .obj-sombra {
  animation: obj-sombra var(--dur, 1.8s) linear
             calc(var(--t-balon, 3.6s) + var(--t, 0s)) forwards;
}

.escena.amanece .obj-giro {
  animation: obj-rodar var(--dur, 1.8s) cubic-bezier(.2, .7, .3, 1)
             calc(var(--t-balon, 3.6s) + var(--t, 0s)) forwards;
}

.escena.amanece .obj-asienta {
  animation: obj-asentar 0.9s ease-out
             calc(var(--t-balon, 3.6s) + var(--t, 0s) + var(--dur, 1.8s) * 0.4) forwards;
}

@keyframes obj-caer {
  0%   { transform: translateY(-300px); opacity: 1; animation-timing-function: ease-in; }
  40%  { transform: translateY(0); opacity: 1; animation-timing-function: ease-out; }
  62%  { transform: translateY(calc(var(--r, 30px) * -1)); opacity: 1; animation-timing-function: ease-in; }
  80%  { transform: translateY(0); opacity: 1; animation-timing-function: ease-out; }
  91%  { transform: translateY(calc(var(--r, 30px) * -0.3)); opacity: 1; animation-timing-function: ease-in; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes obj-rodar {
  from { transform: rotate(var(--g, 360deg)); }
  to   { transform: rotate(0deg); }
}

@keyframes obj-asentar {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(3.2deg); }
  55%  { transform: rotate(-1.6deg); }
  100% { transform: rotate(0deg); }
}

@keyframes obj-sombra {
  0%   { opacity: 0;    transform: scale(0.4); }
  40%  { opacity: 0.28; transform: scale(1); }
  62%  { opacity: 0.14; transform: scale(0.7); }
  80%  { opacity: 0.28; transform: scale(1); }
  91%  { opacity: 0.22; transform: scale(0.9); }
  100% { opacity: 0.28; transform: scale(1); }
}

/* Pelota de básquet */
.bk-cuerpo {
  fill: var(--terracota);
  stroke: var(--terracota-profunda);
  stroke-width: 1.4;
}

.bk-linea {
  fill: none;
  stroke: var(--terracota-profunda);
  stroke-width: 1.3;
  stroke-linecap: round;
}

/* Pelota de fútbol americano */
.fb-cuerpo { fill: var(--terracota-profunda); }

.fb-trazo {
  fill: none;
  stroke: var(--crema);
  stroke-width: 1.2;
  stroke-linecap: round;
}

/* Pelota y raqueta de tenis */
.tn-cuerpo { fill: var(--verde-salvia); }

.tn-costura {
  fill: none;
  stroke: var(--crema);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.raq-cuerdas path {
  fill: none;
  stroke: var(--verde-salvia);
  stroke-width: 0.9;
}

.raq-marco {
  fill: none;
  stroke: var(--verde-cactus);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.raq-mango {
  fill: none;
  stroke: var(--terracota);
  stroke-width: 5;
  stroke-linecap: round;
}

.raq-cinta {
  fill: none;
  stroke: var(--crema);
  stroke-width: 5;
  stroke-dasharray: 1.4 3.4;
  opacity: 0.8;
}

/* Palo de hockey */
.palo-asta {
  fill: none;
  stroke: var(--verde-cactus);
  stroke-width: 4.2;
  stroke-linecap: round;
}

.palo-pala {
  fill: none;
  stroke: var(--verde-cactus);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.palo-cinta {
  fill: none;
  stroke: var(--crema);
  stroke-width: 6;
  stroke-dasharray: 2 3;
}

.palo-grip {
  fill: none;
  stroke: var(--terracota);
  stroke-width: 4.6;
}

/* Sin animaciones: todo queda ya apoyado en la duna */
@media (prefers-reduced-motion: reduce) {
  .obj-cae { opacity: 1; }
  .obj-sombra { opacity: 0.28; }

  .escena.amanece .obj-cae,
  .escena.amanece .obj-sombra,
  .escena.amanece .obj-giro,
  .escena.amanece .obj-asienta { animation: none; }
}
/* ---------- Qué hacemos: brotes ---------- */
.areas li {
  position: relative;
  padding-right: 4rem;
}

.brote {
  position: absolute;
  top: 1.3rem;
  right: 0;
  width: 44px;
  height: 62px;
  overflow: visible;
  transform-origin: 50% 100%;
  transition: transform 0.7s ease;
}

.areas li:hover .brote { transform: rotate(4deg); }

.b-suelo {
  stroke: var(--verde-salvia);
  stroke-width: 2;
  stroke-linecap: round;
}

.b-tallo {
  fill: none;
  stroke: var(--verde-cactus);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s ease-out 0.3s;
}

.b-hoja {
  fill: var(--verde-salvia);
  transform-box: fill-box;
  transform-origin: 0% 100%;
  transform: scale(0);
  transition: transform 0.7s cubic-bezier(.3, 1.5, .5, 1) var(--d, 1s);
}

.b-flor {
  fill: var(--terracota);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.8s cubic-bezier(.3, 1.6, .5, 1) 1.9s;
}

.areas li.visible .b-tallo { stroke-dashoffset: 0; }
.areas li.visible .b-hoja { transform: scale(1); }
.areas li.visible .b-flor { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .b-tallo { stroke-dashoffset: 0; transition: none; }
  .b-hoja,
  .b-flor { transform: scale(1); transition: none; }
  .brote { transition: none; }
}
/* ---------- Inicio: el sol sube por encima de su franja ---------- */
.escena svg {
  position: absolute;
  inset: 0;
}

.escena-sol { overflow: visible; }

/* ---------- Qué hacemos: el deporte, destacado ---------- */
.perfil-deporte { border-top: 3px solid var(--terracota); }

.perfil-deporte .perfil-lateral {
  position: sticky;
  top: 6.5rem;
  align-self: start;
}

.cancha {
  margin: 2rem 0 0;
  max-width: 420px;
}

.cancha svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.cancha figcaption {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Césped y líneas */
.cn-cesped { opacity: 0; transition: opacity 0.8s ease; }
.cn-campo { fill: var(--crema); }
.cn-franja { fill: var(--verde-salvia); opacity: 0.16; }
.cancha.en-vista .cn-cesped { opacity: 1; }

.cn-ln {
  fill: none;
  stroke: var(--verde-salvia);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.cancha.en-vista .cn-ln {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s ease-out 0.2s;
}

.cn-punto { fill: var(--verde-salvia); }

/* Arcos */
.cn-porteria {
  fill: transparent;
  stroke: var(--verde-cactus);
  stroke-width: 2;
}

.cancha.en-vista .cn-porteria-gol {
  stroke: var(--terracota);
  fill: rgba(194, 98, 63, 0.25);
  transition: stroke 0.4s ease 6.2s, fill 0.4s ease 6.2s;
}

/* Pases: se dibujan al mismo ritmo que la pelota */
.cn-pase {
  fill: none;
  stroke: var(--terracota);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.75;
}

.cancha.en-vista .cn-pase {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.8s ease-in-out calc(1.6s + var(--k) * 0.96s);
}

/* Jugadores */
.cn-jug {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}

.cn-jug circle {
  fill: var(--verde-cactus);
  stroke: var(--crema);
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
}

.cancha.en-vista .cn-jug {
  animation: cn-aparece 0.5s cubic-bezier(.3, 1.6, .5, 1) calc(0.7s + var(--i) * 0.15s) forwards;
}

.cancha.en-vista .cn-jug circle {
  animation: cn-toque 0.6s ease-out var(--at) both;
}

@keyframes cn-aparece { to { transform: scale(1); } }

@keyframes cn-toque {
  0%   { fill: var(--verde-cactus); transform: scale(1); }
  40%  { fill: var(--terracota);    transform: scale(1.4); }
  100% { fill: var(--verde-cactus); transform: scale(1); }
}

/* Pelota: cinco toques y gol */
.cn-bal {
  opacity: 0;
  transform: translate(50px, 150px);
}

.cn-bal-c {
  fill: var(--crema);
  stroke: var(--verde-cactus);
  stroke-width: 1.3;
}

.cn-bal-p { fill: var(--verde-cactus); }

.cancha.en-vista .cn-bal {
  animation: cn-jugada 4.8s ease-in-out 1.6s both;
}

@keyframes cn-jugada {
  0%     { transform: translate(50px, 150px);  opacity: 0; }
  1%     { transform: translate(50px, 150px);  opacity: 1; }
  16.67% { transform: translate(95px, 70px); }
  20%    { transform: translate(95px, 70px); }
  36.67% { transform: translate(150px, 125px); }
  40%    { transform: translate(150px, 125px); }
  56.67% { transform: translate(205px, 60px); }
  60%    { transform: translate(205px, 60px); }
  76.67% { transform: translate(240px, 115px); }
  80%    { transform: translate(240px, 115px); }
  96.67% { transform: translate(292px, 105px); }
  100%   { transform: translate(292px, 105px); opacity: 1; }
}

/* Onda del gol */
.cn-onda {
  fill: none;
  stroke: var(--terracota);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.cancha.en-vista .cn-onda {
  animation: cn-gol 1.1s ease-out 6.2s forwards;
}

@keyframes cn-gol {
  0%   { opacity: 0.8; transform: scale(0.5); }
  100% { opacity: 0;   transform: scale(5); }
}

@media (max-width: 820px) {
  .perfil-deporte .perfil-lateral { position: static; }
  .cancha { margin-top: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cancha .cn-cesped,
  .cancha.en-vista .cn-cesped { opacity: 1; transition: none; }

  .cancha .cn-ln,
  .cancha.en-vista .cn-ln,
  .cancha .cn-pase,
  .cancha.en-vista .cn-pase { stroke-dashoffset: 0; transition: none; }

  .cancha .cn-jug,
  .cancha.en-vista .cn-jug { transform: scale(1); animation: none; }

  .cancha .cn-jug circle,
  .cancha.en-vista .cn-jug circle { animation: none; }

  .cancha .cn-bal,
  .cancha.en-vista .cn-bal {
    opacity: 1;
    transform: translate(292px, 105px);
    animation: none;
  }

  .cancha .cn-porteria-gol,
  .cancha.en-vista .cn-porteria-gol {
    stroke: var(--terracota);
    fill: rgba(194, 98, 63, 0.25);
    transition: none;
  }
}
/* ---------- Pie de página ---------- */
.pie {
  --verde-profundo: #2F4A2C;
  position: relative;
  overflow: hidden;
  background: var(--verde-profundo);
  color: var(--arena);
  padding: 4.5rem 0 0;
}

.pie-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  padding-bottom: 3.5rem;
}

/* Marca */
.cactus-pie { height: 92px; margin-bottom: 1.4rem; }

.pie .cactus-vivo .c-cuerpo,
.pie .cactus-vivo .c-brazo { fill: var(--verde-salvia); }

.pie-nombre {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  color: var(--crema);
  margin-bottom: 0.6rem;
}

.pie-nombre span { color: var(--terracota); }

.pie-lema {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--crema);
  margin-bottom: 1rem;
}

.pie-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 380px;
}

/* Columnas de links */
.pie-col h4 {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--terracota);
  margin-bottom: 1.2rem;
}

.pie-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.pie-col a,
.pie-subir {
  color: var(--arena);
  text-decoration: none;
  font-size: 1rem;
  overflow-wrap: anywhere;
  padding-bottom: 2px;
  background: linear-gradient(var(--terracota), var(--terracota)) 0 100% / 0% 1px no-repeat;
  transition: color 0.25s ease, background-size 0.4s ease;
}

.pie-col a:hover,
.pie-col a:focus-visible,
.pie-subir:hover,
.pie-subir:focus-visible {
  color: var(--crema);
  background-size: 100% 1px;
}

/* Línea base */
.pie-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 0;
  border-top: 1px solid rgba(247, 241, 229, 0.22);
  font-size: 0.88rem;
}

.pie-subir span {
  display: inline-block;
  transition: transform 0.3s ease;
}

.pie-subir:hover span,
.pie-subir:focus-visible span { transform: translateY(-4px); }

/* Firma grande */
.pie-firma {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(3rem, 13vw, 10rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: rgba(247, 241, 229, 0.07);
  margin: 1.5rem 0 -0.12em;
  user-select: none;
}

@media (max-width: 820px) {
  .pie { padding-top: 3.5rem; }

  .pie-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 2rem;
    padding-bottom: 2.5rem;
  }

  .pie-marca { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .pie-grid { grid-template-columns: 1fr; }
}
/* =========================================================
   REDISEÑO v3 · tipografía sans-serif + ajustes de celular
   (pegar AL FINAL de style.css, sin borrar nada)
   ========================================================= */

:root { --fuente-titulo: 'Outfit', 'Nunito Sans', sans-serif; }

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }

/* ---------- 1. Tipografía de títulos ---------- */
.loader-lema, .loader-firma, .logo, .menu a, .idiomas-btn button,
.hero h1, .hero-analogia, .hero-etiqueta, .btn,
.seccion h2, .seccion-intro, .seccion-etiqueta, .rol,
.perfil-lateral h3, .perfil-texto .destacado,
.hito-cifra, .areas h4, .area-num,
.cifra-num, .dato-num, .barrera-num, .barreras h4, .pilares h4, .pilar-tag,
.via-num, .via-cuerpo h3, .via-flecha, .mail-grande,
.cierre p, .cierre cite,
.pie-nombre, .pie-lema, .pie-col h4, .pie-firma {
  font-family: var(--fuente-titulo);
}

/* ---------- 2. Pantalla de carga ---------- */
.loader-lema {
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  max-width: 22rem;
}

.loader-firma { font-weight: 600; letter-spacing: 0.3em; }

/* ---------- 3. Menú ---------- */
.logo { font-weight: 700; font-size: 1.4rem; letter-spacing: -0.01em; }

.menu { margin-left: auto; gap: 1.5rem; }

.menu a {
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.idiomas-btn { margin-left: 1.4rem; }

.idiomas-btn button {
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}

.hamburguesa { width: 44px; height: 44px; padding: 0; line-height: 1; }

/* ---------- 4. Etiquetas pequeñas ---------- */
.hero-etiqueta,
.seccion-etiqueta,
.rol {
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
}

/* ---------- 5. Botones ---------- */
.btn {
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1rem 2rem;
}

/* ---------- 6. Portada alineada a la izquierda ---------- */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  justify-content: flex-start;
  text-align: left;
  padding: 7.5rem 0 calc(var(--escena-h) * 0.6 + 2rem);
}

.hero-contenido {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.hero-contenido > * { max-width: 720px; }

.hero-etiqueta { margin-bottom: 1.4rem; }

.hero h1 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(2.2rem, 7.4vw, 5rem);
  line-height: 1.02;
  max-width: 900px;
  margin-bottom: 1.8rem;
  text-wrap: balance;
}

.hero-analogia {
  font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.5;
  margin-bottom: 1.1rem;
}

.hero-mision {
  font-size: 1.02rem;
  line-height: 1.7;
  margin-bottom: 2.2rem;
}

.hero-botones { justify-content: flex-start; }

/* ---------- 7. Títulos de sección ---------- */
.seccion h2 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.6rem, 4.2vw, 2.7rem);
  line-height: 1.1;
  max-width: 860px;
  text-wrap: balance;
}

.seccion-intro {
  font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.55;
  max-width: 680px;
}

.perfil-lateral h3 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  line-height: 1.15;
}

.perfil-texto .destacado {
  font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.4;
  text-wrap: balance;
}

/* ---------- 8. Cifras y títulos pequeños ---------- */
.hito-cifra { font-weight: 700; }

.valores .hito-cifra {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
}

.areas h4,
.pilares h4 {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1rem;
  line-height: 1.3;
}

.cifra-num, .dato-num { font-weight: 700; }
.barrera-num { font-weight: 600; }
.barreras h4 { font-weight: 600; font-size: 1.1rem; line-height: 1.35; }

.area-num, .via-num, .pilar-tag { font-weight: 600; letter-spacing: 0.18em; }

.via-cuerpo h3 {
  font-weight: 600;
  font-size: clamp(1.25rem, 2.8vw, 1.8rem);
}

.mail-grande {
  font-weight: 600;
  font-size: clamp(1.3rem, 5.2vw, 3.2rem);
}

.cierre p {
  font-weight: 500;
  font-size: clamp(1.25rem, 3vw, 1.9rem);
  line-height: 1.35;
}

.cierre cite { font-weight: 600; }

/* ---------- 9. Pie de página ---------- */
.pie-nombre { font-weight: 700; letter-spacing: -0.01em; }
.pie-lema { font-weight: 500; }
.pie-col h4 { font-weight: 600; letter-spacing: 0.2em; }

.pie-firma {
  font-weight: 700;
  font-size: clamp(2.4rem, 11vw, 9rem);
  letter-spacing: -0.025em;
}

/* =========================================================
   CELULAR Y TABLET
   ========================================================= */

/* Menú desplegable (hasta 960 px de ancho) */
@media (max-width: 960px) {
  .hamburguesa {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -0.6rem;
  }

  .idiomas-btn { margin-left: auto; }

  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    background: var(--crema);
    border-bottom: 1px solid var(--arena);
    box-shadow: 0 18px 30px rgba(43, 42, 38, 0.08);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }

  .menu.abierto { max-height: 440px; }

  .menu li { width: 100%; text-align: left; }

  .nav .menu li:not(.idiomas-btn) a {
    display: block;
    padding: 1.05rem 1.5rem;
    font-size: 0.85rem;
    border-top: 1px solid var(--arena);
    border-bottom: 0;
  }

  .nav .menu li:not(.idiomas-btn) a.actual {
    color: var(--terracota);
    border-bottom: 0;
    box-shadow: inset 3px 0 0 var(--terracota);
  }
}

@media (max-width: 820px) {
  .hero {
    --escena-h: clamp(170px, 30svh, 250px);
    padding: 6.5rem 0 calc(var(--escena-h) + 1.5rem);
  }

  .hero-mision { font-size: 0.98rem; margin-bottom: 1.8rem; }

  .seccion { padding: 3.5rem 0; }
  .seccion-cabecera { margin-bottom: 2.5rem; }

  .perfil { padding-top: 1.8rem; }
  .perfil + .perfil { margin-top: 3rem; }
  .perfil-texto p { font-size: 1rem; line-height: 1.75; }
  .perfil-texto .destacado { margin-bottom: 1.2rem; }

  .hito-cifra { font-size: 2.2rem; }
  .valores .hito-cifra { font-size: 1.5rem; }

  .cifras { gap: 1.8rem 1rem; }
  .cifra-num { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .cifra-texto { font-size: 0.85rem; }

  .dato { padding: 1.2rem 0; }

  .barreras li { grid-template-columns: 2.4rem 1fr; gap: 0.6rem; padding: 1.3rem 0 1.5rem; }
  .barrera-num { font-size: 1.6rem; }

  .areas li { padding-right: 3.4rem; }
  .brote { width: 34px; height: 48px; top: 1.2rem; }

  .via { grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 0.8rem; padding: 1.5rem 0; }

  .cancha { max-width: 100%; }

  .pie { padding-top: 3rem; }
  .pie-grid { gap: 2rem 1.5rem; }
}

@media (max-width: 480px) {
  .nav { padding: 0.7rem 1.25rem; gap: 0.5rem; }
  .contenedor, .hero-contenido { padding-left: 1.25rem; padding-right: 1.25rem; }

  .logo { font-size: 1.2rem; }
  .cactus-mini { height: 28px; margin-right: 0.4rem; }
  .idiomas-btn button { padding: 0.32rem 0.5rem; font-size: 0.7rem; }

  .hero-botones .btn { flex: 1 1 100%; text-align: center; }

  .pie-base { flex-direction: column; align-items: flex-start; }
}

/* En pantallas táctiles no hay "pasar el mouse" */
@media (hover: none) {
  .via:hover .via-cuerpo h3 { color: var(--verde-cactus); transform: none; }
  .via:hover .via-flecha { transform: none; }
  .barreras li:hover .barrera-num { transform: none; }
  .areas li:hover .brote { transform: none; }
}
/* =========================================================
   AJUSTE v3.1 · menos mayúsculas + portada de celular
   (pegar AL FINAL de style.css, sin borrar nada)
   ========================================================= */

/* Interruptor: "uppercase" = mayúsculas en las etiquetas chicas.
   Cambialo a "none" para quitar TODAS las mayúsculas decorativas. */
:root { --mayus: uppercase; }

/* ---------- 1. Mayúsculas solo en etiquetas chicas ---------- */
.hero-etiqueta,
.seccion-etiqueta,
.rol,
.area-num,
.pie-col h4,
.cierre cite,
.loader-firma { text-transform: var(--mayus); }

/* ---------- 2. Todo lo demás, en minúscula normal ---------- */
.loader-lema,
.hero h1,
.seccion h2,
.perfil-lateral h3,
.valores .hito-cifra,
.areas h4,
.pilares h4,
.menu a,
.btn { text-transform: none; }

/* ---------- 3. Pantalla de carga ---------- */
.loader-lema {
  font-weight: 500;
  font-size: clamp(1.3rem, 5vw, 1.75rem);
  letter-spacing: 0;
  line-height: 1.3;
  max-width: 20rem;
  text-wrap: balance;
}

.loader-firma { font-size: 0.8rem; letter-spacing: 0.26em; }

/* ---------- 4. Menú ---------- */
.menu { gap: 1.7rem; }
.menu a { font-size: 0.95rem; font-weight: 500; letter-spacing: 0; }

/* ---------- 5. Etiquetas chicas ---------- */
.hero-etiqueta,
.seccion-etiqueta,
.rol { font-size: 0.76rem; letter-spacing: 0.16em; }

.hero-etiqueta { text-wrap: balance; }

/* ---------- 6. Botones ---------- */
.btn {
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  padding: 0.95rem 1.9rem;
}

/* ---------- 7. Títulos ---------- */
.hero h1 {
  font-weight: 600;
  letter-spacing: -0.025em;
  font-size: clamp(2.4rem, 7.6vw, 5.2rem);
  line-height: 1.05;
}

.seccion h2 {
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 4.6vw, 3rem);
  line-height: 1.12;
}

.perfil-lateral h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: clamp(1.45rem, 2.8vw, 1.9rem);
}

.valores .hito-cifra {
  letter-spacing: -0.01em;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

.areas h4,
.pilares h4 { font-size: 1.15rem; letter-spacing: 0; }

/* ---------- 8. Celular y tablet ---------- */
@media (max-width: 960px) {
  .nav .menu li:not(.idiomas-btn) a { font-size: 1rem; }
}

@media (max-width: 820px) {
  .hero {
    --escena-h: clamp(150px, 26svh, 230px);
    padding: 5.8rem 0 calc(var(--escena-h) * 0.75 + 1rem);
  }

  .hero-analogia { font-size: 1.05rem; line-height: 1.5; }
  .hero-mision { font-size: 0.95rem; line-height: 1.65; margin-bottom: 1.5rem; }
}

@media (max-width: 480px) {
  .hero-etiqueta { font-size: 0.7rem; letter-spacing: 0.12em; }
  .hero h1 { font-size: clamp(2.2rem, 10vw, 2.8rem); margin-bottom: 1.3rem; }

  .hero-botones { gap: 0.75rem; }
  .hero-botones .btn {
    flex: 1 1 auto;
    text-align: center;
    padding: 0.9rem 1.2rem;
  }
}
/* =========================================================
   AJUSTE v3.2 · la portada entra completa en la primera pantalla
   (pegar AL FINAL de style.css, sin borrar nada)
   ========================================================= */

.hero {
  --escena-h: clamp(160px, 26vh, 320px);
  --escena-h: clamp(160px, 26svh, 320px);
  --escala-escena: max(calc(100vw / 1200), calc(var(--escena-h) / 300));
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(5.2rem, 12vh, 7.5rem) 0 calc(var(--escala-escena) * 152 + 1.1rem);
  padding: clamp(5.2rem, 12svh, 7.5rem) 0 calc(var(--escala-escena) * 152 + 1.1rem);
}

.hero-contenido > * { max-width: 780px; }

.hero-etiqueta {
  font-size: 0.74rem;
  letter-spacing: 0.15em;
  margin-bottom: clamp(0.7rem, 2vh, 1.2rem);
  text-wrap: balance;
}

.hero h1 {
  font-size: clamp(2rem, min(9.4vw, 9vh), 4.8rem);
  font-size: clamp(2rem, min(9.4vw, 9svh), 4.8rem);
  line-height: 1.04;
  margin-bottom: clamp(0.8rem, 2.4vh, 1.5rem);
}

.hero-analogia {
  font-size: clamp(1rem, min(2.4vw, 2.9vh), 1.35rem);
  font-size: clamp(1rem, min(2.4vw, 2.9svh), 1.35rem);
  line-height: 1.45;
  margin-bottom: clamp(0.6rem, 1.6vh, 1rem);
}

.hero-mision {
  max-width: 840px;
  font-size: clamp(0.88rem, min(2.1vw, 2.3vh), 1rem);
  font-size: clamp(0.88rem, min(2.1vw, 2.3svh), 1rem);
  line-height: 1.6;
  margin-bottom: clamp(1rem, 3vh, 1.9rem);
}

.hero-botones .btn {
  font-size: 0.95rem;
  padding: clamp(0.75rem, 1.9vh, 0.95rem) 1.7rem;
}

@media (max-width: 480px) {
  .hero-etiqueta { font-size: 0.66rem; letter-spacing: 0.1em; }

  .hero-botones { gap: 0.7rem; }
  .hero-botones .btn {
    flex: 1 1 auto;
    text-align: center;
    padding: 0.85rem 1rem;
    font-size: 0.92rem;
  }
}