/* Heart of Passion · prototipo
   Colores medidos en el logo original (referencia/marca/logo-hop-original-2021.png).
   Tipografía: Open Sans, la del sitio anterior. El ancho condensado (wdth 75)
   acerca los titulares a las letras del logo sin traer otra fuente. */

:root {
  --rojo: #c32127;
  --rojo-oscuro: #9e1a1f;
  --celeste: #26ace2;
  --celeste-claro: #8cd7f7;

  /* Tonos de texto de la marca. El celeste del logo no llega a 3:1 sobre blanco. */
  --rojo-texto: #c32127;
  --celeste-texto: #1a85b3;

  --fondo: #ffffff;
  --superficie: #ffffff;
  --tinta: #1c1b1f;
  --tinta-suave: #4b4952;
  --acento: var(--rojo);
  --linea: rgb(28 27 31 / 0.14);
  --rayos: rgb(38 172 226 / 0.13);

  --ancho: 72rem;
  --margen: 1rem;
  --radio: 0.75rem;
  --alto-barra: 4.25rem;

  --display: "Open Sans", system-ui, sans-serif;
  --texto: "Open Sans", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}

@media (min-width: 48rem) {
  :root { --margen: 2rem; }
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--acento); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--celeste);
  outline-offset: 3px;
  border-radius: 4px;
}

[id] { scroll-margin-top: calc(var(--alto-barra) + 1rem); }

.saltar {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--tinta);
  color: var(--fondo);
  border-radius: var(--radio);
}
.saltar:focus { top: 1rem; }

.contenedor {
  width: min(100% - 2 * var(--margen), var(--ancho));
  margin-inline: auto;
}

/* ---------- Tipografía ---------- */

h1, h2, h3, .display {
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.6rem + 5.2vw, 6rem); text-transform: uppercase; }
h2 { font-size: clamp(2rem, 1.4rem + 3vw, 3.75rem); text-transform: uppercase; }
h3 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); }

p { margin: 0 0 1em; max-width: 65ch; text-wrap: pretty; }

.etiqueta {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
}

.entrada {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.5;
  color: var(--tinta);
}

.suave { color: var(--tinta-suave); }

/* ---------- Aviso de borrador ---------- */

.aviso-borrador {
  background: #ffffff;
  color: var(--tinta);
  border-bottom: 1px solid var(--linea);
  font-size: 0.875rem;
  line-height: 1.45;
  padding: 0.6rem 0;
}
.aviso-borrador p { margin: 0; max-width: none; }
.aviso-borrador strong { color: var(--rojo-texto); }

/* Marcas de "por confirmar". Fijan fondo y tinta: no siguen al tema. */
.nota {
  --tinta: #3a2a00;
  display: inline-block;
  margin: 0.25rem 0;
  padding: 0.2rem 0.6rem;
  border: 1.5px dashed #b88a00;
  border-radius: 0.4rem;
  background: #fff4cc;
  color: var(--tinta);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  font-stretch: 100%;
  letter-spacing: 0;
  text-transform: none;
}
.nota::before { content: "To confirm: "; font-weight: 800; }

/* ---------- Barra ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}

.barra .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--alto-barra);
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.marca img:first-child { width: 2.6rem; height: auto; }
.marca img:last-child { width: 9.5rem; height: auto; }

.menu-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
}

.menu {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.5rem);
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
  padding: 0.5rem var(--margen) 1.25rem;
}
.menu.abierto { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }

.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a {
  display: block;
  padding: 0.7rem 0;
  color: var(--tinta);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--linea);
}
.menu a[aria-current="page"] { color: var(--acento); }
.menu .boton { margin-top: 1rem; border-bottom: 0; display: flex; }

/* Sin JavaScript el menú se ve siempre. */
.sin-js .menu { visibility: visible; opacity: 1; transform: none; pointer-events: auto; position: static; border: 0; padding: 0 0 1rem; }
.sin-js .menu-boton { display: none; }
.sin-js .barra .contenedor { flex-wrap: wrap; }

@media (min-width: 62rem) {
  .menu-boton { display: none; }
  .menu, .sin-js .menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    position: static;
    padding: 0;
    border: 0;
    background: none;
  }
  .menu ul { display: flex; align-items: center; gap: 1.75rem; }
  .menu a { border: 0; padding: 0.4rem 0; font-size: 0.9375rem; }
  .menu .boton { margin-top: 0; padding: 0.6rem 1.2rem; }
}

/* ---------- Botones ---------- */

.boton {
  /* Fondo fijo rojo: fija también su tinta. */
  --tinta-boton: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: var(--rojo);
  color: var(--tinta-boton);
  font-weight: 700;
  text-decoration: none;
  transition: transform 140ms var(--ease-out);
}
.menu a.boton, .menu a.boton[aria-current="page"] { color: #ffffff; }
.boton:active { transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { transform: translateY(-2px); }
}

.boton.secundario {
  background: transparent;
  color: var(--tinta);
  box-shadow: inset 0 0 0 2px var(--tinta);
}

.botones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* ---------- Secciones ---------- */

.seccion { padding-block: clamp(4rem, 3rem + 5vw, 8rem); }
.seccion.superficie { background: var(--superficie); }

.cabecera-seccion { max-width: 48rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

/* ---------- Portada ---------- */

.portada {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 5vw, 7rem);
}

.portada .contenedor {
  position: relative;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.rayos {
  position: absolute;
  inset: -40% -40% auto auto;
  width: 160vmax;
  aspect-ratio: 1;
  background: repeating-conic-gradient(from 0deg, var(--rayos) 0deg 4deg, transparent 4deg 12deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%);
  mask-image: radial-gradient(circle, #000 0%, transparent 62%);
  pointer-events: none;
}

.portada .emblema { width: min(16rem, 62vw); justify-self: center; }

@media (min-width: 56rem) {
  .portada .contenedor { grid-template-columns: 1.35fr 1fr; }
  .portada .emblema { width: 100%; max-width: 30rem; order: 2; }
  .rayos { inset: 50% auto auto 75%; translate: -50% -50%; width: 140vmax; }
}

.portada h1 span { display: block; }
.portada h1 .rojo { color: var(--rojo-texto); }
.portada h1 .celeste { color: var(--celeste-texto); }

/* Titulares de página interior */
.portada.interior h1 { font-size: clamp(2.4rem, 1.6rem + 4vw, 5rem); }
.portada.interior .emblema { width: min(10rem, 40vw); }
@media (min-width: 56rem) {
  .portada.interior .emblema { max-width: 18rem; }
}

/* ---------- Misión ---------- */

.mision { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mision li {
  display: grid;
  gap: 0.25rem 2rem;
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-top: 1px solid var(--linea);
}
.mision li:last-child { border-bottom: 1px solid var(--linea); }
.mision .display {
  font-size: clamp(2.2rem, 1.4rem + 4vw, 4.75rem);
  text-transform: uppercase;
  margin: 0;
}
.mision li:nth-child(1) .display { color: var(--rojo-texto); }
.mision li:nth-child(2) .display { color: var(--celeste-texto); }
.mision p { margin: 0; font-size: 1.125rem; align-self: center; }

@media (min-width: 56rem) {
  .mision li { grid-template-columns: 1.2fr 1fr; }
}

/* ---------- Tarjetas ---------- */

.tarjetas {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

.tarjeta {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo);
}
.superficie .tarjeta { background: var(--fondo); }
.tarjeta h3 { text-transform: uppercase; }
.tarjeta p:last-of-type { flex-grow: 1; }
.tarjeta p.nota:last-of-type { flex-grow: 0; align-self: flex-start; }
.tarjeta .mas { font-weight: 700; margin-top: 0.5rem; }

/* ---------- Alfombra roja ---------- */
/* Superficie de fondo fijo: fija todos sus tokens de tinta. */

.alfombra {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border-block: 3px solid var(--rojo);
}
.alfombra .contenedor { position: relative; }
.alfombra .boton { background: var(--rojo); --tinta-boton: #ffffff; }
.alfombra .boton.secundario { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
.alfombra .etiqueta { color: var(--rojo-texto); }

/* ---------- Columnas de texto ---------- */

.dos-columnas { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) {
  .dos-columnas { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* ---------- Historia ---------- */

.historia { max-width: 42rem; margin-inline: auto; }
.historia p { font-size: clamp(1.05rem, 1rem + 0.25vw, 1.175rem); line-height: 1.75; }
.historia h2 { margin-top: 3.5rem; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); }
.firma { font-weight: 700; margin-top: 2rem; }

.destacado {
  margin: 2.5rem 0;
  padding: 1.5rem 0 1.5rem 1.5rem;
  border-left: 4px solid var(--celeste);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  line-height: 1.4;
  font-weight: 600;
}
.destacado p { margin: 0; }
.destacado blockquote { margin: 0; }
.destacado figcaption { margin-top: 1rem; font-size: 0.9375rem; font-weight: 400; line-height: 1.5; }
.cita blockquote { margin: 0; }

/* ---------- Citas ---------- */

.citas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.cita {
  margin: 0;
  padding: 1.75rem;
  border-radius: var(--radio);
  background: var(--superficie);
  border-top: 4px solid var(--celeste);
}
.superficie .cita { background: var(--fondo); }
.cita p { font-size: 1.0625rem; }
.cita footer { font-weight: 700; font-size: 0.9375rem; color: var(--tinta-suave); }

/* ---------- Listas ---------- */

.lista-roles { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.lista-roles li { padding: 1.25rem 0; border-top: 1px solid var(--linea); }
.lista-roles h3 { font-size: 1.3rem; margin-bottom: 0.35rem; text-transform: uppercase; }
.lista-roles p { margin: 0; }
@media (min-width: 56rem) {
  .lista-roles { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}

.lista { padding-left: 1.2rem; }
.lista li { margin-bottom: 0.5rem; }
.lista li::marker { color: var(--celeste); }

.papeles { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.papeles div { padding-top: 1rem; border-top: 3px solid var(--celeste); }
.papeles h3 { font-size: 1.25rem; text-transform: uppercase; margin-bottom: 0.3rem; }
.papeles p { margin: 0; }

/* ---------- Preguntas ---------- */

.preguntas { max-width: 48rem; }
.preguntas details { border-top: 1px solid var(--linea); }
.preguntas details:last-child { border-bottom: 1px solid var(--linea); }
.preguntas summary {
  cursor: pointer;
  padding: 1.1rem 2rem 1.1rem 0;
  font-weight: 700;
  font-size: 1.0625rem;
  list-style: none;
  position: relative;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 0.9rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--acento);
  transition: transform 180ms var(--ease-out);
}
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding-bottom: 0.5rem; }

/* ---------- Donar ---------- */

.formas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); counter-reset: forma; }
.forma { counter-increment: forma; }
.forma::before {
  content: counter(forma, decimal-leading-zero);
  display: block;
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  color: var(--celeste-texto);
  margin-bottom: 0.75rem;
}
address { font-style: normal; }

/* ---------- Pie ---------- */

.pie {
  padding-block: 4rem 2rem;
  background: var(--superficie);
  border-top: 1px solid var(--linea);
  font-size: 0.9375rem;
}
.pie .columnas { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.pie h2 { font-size: 1.1rem; letter-spacing: 0.08em; margin-bottom: 0.75rem; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 0.4rem; }
.pie .emblema-pie { width: 4.5rem; margin-bottom: 1rem; }
.pie .legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); color: var(--tinta-suave); font-size: 0.8125rem; }
.pie .legal p { max-width: none; margin-bottom: 0.4rem; }
.pie .credito a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--tinta-suave); text-decoration: none; opacity: 0.8; }
.pie .credito a:hover, .pie .credito a:focus-visible { opacity: 1; color: var(--tinta); }
/* Logo de ECG como máscara: toma el color del texto del pie, así no compite con la marca de HoP. */
.logo-ecg { display: inline-block; width: 4.4rem; aspect-ratio: 1238 / 489; background: currentColor; -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1238 489'><path d='M273.05 1L277 0.22L278.28 1L294.25 70L294 71.15L291 72.31L99 116.9L97.76 118L113.86 188L115 189.37L164 178.42L310 143.86L311.43 145L312.38 149L326.93 214L132 260.1L131.32 262L132.6 268L149.3 341L150 341.91L155 341.26L312.6 304L312.67 282L313.8 267L315.76 254L318.78 241L327.34 216L327.56 214L329.17 212L335.67 199L342.74 187L349.67 177L359.46 165L371 153.17L380.3 145L391 136.9L405 127.94L421 119.49L432 114.61L445 109.77L463 104.66L477 101.64L497 98.94L523 98.14L539 98.8L555 100.75L571 103.77L585 107.65L597 111.8L609 116.94L621 123.41L632 130.67L641 137.85L652 148.21L653.32 147L661.8 133L670.64 121L679.34 111L689 101.4L699 92.91L713 82.68L726 74.81L736 69.73L748 64.63L762 59.77L777 55.83L794 52.71L804 51.52L824 50.65L844 51.56L854 52.7L867 54.82L883 58.73L896 62.93L910 68.55L922 74.55L934 81.82L946 90.66L953 96.74L961.47 105L970.26 115L978.31 126L985.16 137L992.18 151L997.22 164L1002.34 181L1003.19 185L1002.84 186L924 199.21L922.5 198L918.43 184L915.16 176L910.23 167L904.61 159L898.18 152L891 145.78L884 140.76L875 135.64L866 131.82L852 127.68L840 125.79L829 124.92L819 125.08L805 126.65L796 128.68L784 132.56L775 136.53L766 141.48L754.04 150L746.23 157L738.82 165L732.7 173L724.8 186L719.64 197L715.59 208L711.88 222L709.82 234L708.64 246L708.65 263L709.72 274L711.64 285L714.7 296L721.99 313L726.71 321L732.42 329L743 340.27L750 346.11L759 352.25L768 357.1L778 361.31L796 366.29L815 368.49L825 368.39L835 367.36L846 365.33L858 361.33L867 357.15L879 349.39L890.14 339L897.29 330L903.37 320L909 307L908.71 306L907 305.4L842 297.86L841.43 297L841.78 293L847.86 241L849 238.9L1004 256.7L1004.82 258L1004.22 264L980.95 449L980 450.03L973 449.45L919 443.12L914.14 442L913.8 441L914.74 433L926.27 340L926 337.53L925 338.54L917.05 357L908.34 374L899.21 388L890.16 399L879 409.81L866 419.38L851 427.36L841 431.23L826 435.2L812 437.28L795 437.78L775 436.29L759 433.2L739 427.29L722 420.18L709 413.13L697 405.19L686 396.58L676 387.18L669 379.64L661.98 371L651.81 356L639.58 332L634.67 319L630.86 306L625.87 279L624.88 268L624.53 252L626.28 225L625 224.62L603 232.1L601.76 231L596.45 218L589.35 206L582.21 197L574 189.47L562 181.67L550 176.65L539 173.79L521 171.71L503 172.42L493 173.87L481 176.66L462 183.65L449 190.51L437 198.92L427 208.15L417.62 219L408.78 233L403.77 244L399.61 257L396.81 272L395.86 290L396.83 305L399.7 322L403.55 335L408.48 347L415.61 360L423 370.31L434 382.25L445 391.3L459 400.21L470 405.36L481 409.49L496 413.42L509 415.24L527 415.64L544 414.39L558 411.27L570 407.21L581 402.25L594 394.54L595 394.47L596.15 396L625.43 461L626.04 463L625 464.38L605 473.29L583 480.43L560 485.34L544 487.27L518 488.27L498 487.21L483 485.36L472 483.3L453 478.36L436 472.43L416 463.1L395 450.29L382 440.17L367.02 426L354 411L341.74 393L332.71 376L331 374.92L92 431.28L87 431.88L82.89 417L12.68 119L1.74 72L0.6 65L2 63.9L19 59.88L273.05 1Z' fill='%23000' fill-rule='evenodd'/><polygon points='1048.3,91.1 1181.4,27.9 1233.4,134.0 1172.5,158.1 1194.4,209.7 1093.0,218.7' fill='%23000'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1238 489'><path d='M273.05 1L277 0.22L278.28 1L294.25 70L294 71.15L291 72.31L99 116.9L97.76 118L113.86 188L115 189.37L164 178.42L310 143.86L311.43 145L312.38 149L326.93 214L132 260.1L131.32 262L132.6 268L149.3 341L150 341.91L155 341.26L312.6 304L312.67 282L313.8 267L315.76 254L318.78 241L327.34 216L327.56 214L329.17 212L335.67 199L342.74 187L349.67 177L359.46 165L371 153.17L380.3 145L391 136.9L405 127.94L421 119.49L432 114.61L445 109.77L463 104.66L477 101.64L497 98.94L523 98.14L539 98.8L555 100.75L571 103.77L585 107.65L597 111.8L609 116.94L621 123.41L632 130.67L641 137.85L652 148.21L653.32 147L661.8 133L670.64 121L679.34 111L689 101.4L699 92.91L713 82.68L726 74.81L736 69.73L748 64.63L762 59.77L777 55.83L794 52.71L804 51.52L824 50.65L844 51.56L854 52.7L867 54.82L883 58.73L896 62.93L910 68.55L922 74.55L934 81.82L946 90.66L953 96.74L961.47 105L970.26 115L978.31 126L985.16 137L992.18 151L997.22 164L1002.34 181L1003.19 185L1002.84 186L924 199.21L922.5 198L918.43 184L915.16 176L910.23 167L904.61 159L898.18 152L891 145.78L884 140.76L875 135.64L866 131.82L852 127.68L840 125.79L829 124.92L819 125.08L805 126.65L796 128.68L784 132.56L775 136.53L766 141.48L754.04 150L746.23 157L738.82 165L732.7 173L724.8 186L719.64 197L715.59 208L711.88 222L709.82 234L708.64 246L708.65 263L709.72 274L711.64 285L714.7 296L721.99 313L726.71 321L732.42 329L743 340.27L750 346.11L759 352.25L768 357.1L778 361.31L796 366.29L815 368.49L825 368.39L835 367.36L846 365.33L858 361.33L867 357.15L879 349.39L890.14 339L897.29 330L903.37 320L909 307L908.71 306L907 305.4L842 297.86L841.43 297L841.78 293L847.86 241L849 238.9L1004 256.7L1004.82 258L1004.22 264L980.95 449L980 450.03L973 449.45L919 443.12L914.14 442L913.8 441L914.74 433L926.27 340L926 337.53L925 338.54L917.05 357L908.34 374L899.21 388L890.16 399L879 409.81L866 419.38L851 427.36L841 431.23L826 435.2L812 437.28L795 437.78L775 436.29L759 433.2L739 427.29L722 420.18L709 413.13L697 405.19L686 396.58L676 387.18L669 379.64L661.98 371L651.81 356L639.58 332L634.67 319L630.86 306L625.87 279L624.88 268L624.53 252L626.28 225L625 224.62L603 232.1L601.76 231L596.45 218L589.35 206L582.21 197L574 189.47L562 181.67L550 176.65L539 173.79L521 171.71L503 172.42L493 173.87L481 176.66L462 183.65L449 190.51L437 198.92L427 208.15L417.62 219L408.78 233L403.77 244L399.61 257L396.81 272L395.86 290L396.83 305L399.7 322L403.55 335L408.48 347L415.61 360L423 370.31L434 382.25L445 391.3L459 400.21L470 405.36L481 409.49L496 413.42L509 415.24L527 415.64L544 414.39L558 411.27L570 407.21L581 402.25L594 394.54L595 394.47L596.15 396L625.43 461L626.04 463L625 464.38L605 473.29L583 480.43L560 485.34L544 487.27L518 488.27L498 487.21L483 485.36L472 483.3L453 478.36L436 472.43L416 463.1L395 450.29L382 440.17L367.02 426L354 411L341.74 393L332.71 376L331 374.92L92 431.28L87 431.88L82.89 417L12.68 119L1.74 72L0.6 65L2 63.9L19 59.88L273.05 1Z' fill='%23000' fill-rule='evenodd'/><polygon points='1048.3,91.1 1181.4,27.9 1233.4,134.0 1172.5,158.1 1194.4,209.7 1093.0,218.7' fill='%23000'/></svg>") center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference) { .pie .credito a { transition: opacity 160ms ease-out, color 160ms ease-out; } }

/* ---------- Movimiento ---------- */

@media (prefers-reduced-motion: no-preference) {
  .menu { transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
  .portada .emblema { animation: entrar-emblema 520ms var(--ease-out) both; }
  .js .aparece { opacity: 0; transform: translateY(12px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
  .js .aparece.visible { opacity: 1; transform: none; }
}

@keyframes entrar-emblema {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* Titular que es una frase completa: sin mayúsculas forzadas. */
.portada h1.frase { text-transform: none; font-size: clamp(2.1rem, 1.4rem + 3vw, 4rem); }

/* =========================================================
   Inicio, versión 2 (2 nov 2026): fotos de HoP, relato y movimiento.
   Las superficies oscuras o rojas fijan su propia tinta.
   ========================================================= */

:root {
  --noche: #141218;
  --ease-suave: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Hero con fotos ---------- */

.hero {
  --tinta: #ffffff;
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: min(calc(100svh - var(--alto-barra) - 3rem), 56rem);
  min-height: max(34rem, min(calc(100svh - var(--alto-barra) - 3rem), 56rem));
  padding-block: 7rem 5.5rem;
  background: var(--noche);
  color: var(--tinta);
  overflow: hidden;
}
.hero-fotos, .hero-velo { position: absolute; inset: 0; z-index: -1; }
.hero-fotos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  opacity: 0;
  transition: opacity 1.4s var(--ease-suave);
}
.hero-fotos img.activa { opacity: 1; }
.hero-velo {
  background:
    linear-gradient(180deg, rgb(20 18 24 / 0.55) 0%, rgb(20 18 24 / 0.1) 30%, rgb(20 18 24 / 0.35) 55%, rgb(20 18 24 / 0.92) 100%),
    linear-gradient(90deg, rgb(20 18 24 / 0.55) 0%, rgb(20 18 24 / 0) 65%);
}
.hero-contenido { position: relative; }
.hero-etiqueta { color: #ffffff; letter-spacing: 0.24em; }
.hero-etiqueta span { display: inline-flex; align-items: center; gap: 0.75rem; }
.hero-etiqueta span::before { content: ""; width: 2.5rem; height: 2px; background: var(--celeste); }
.hero-titulo {
  font-size: clamp(3.4rem, 1.6rem + 9vw, 10.5rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  color: #ffffff;
}
.hero-titulo .linea { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero-titulo .linea > span { display: inline-block; }
.hero-titulo .linea:last-child > span { color: #ffffff; }
.hero-lema {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.85rem);
  font-weight: 600;
  line-height: 1.3;
  max-width: 32ch;
  margin-bottom: 0;
}
.hero-lema .celeste { color: var(--celeste-claro); }
.hero-botones { margin-top: 2rem; }
.hero-pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.8);
}
.hero-puntos { display: flex; gap: 0.5rem; }
.hero-puntos i { width: 1.75rem; height: 3px; border-radius: 3px; background: rgb(255 255 255 / 0.35); overflow: hidden; position: relative; }
.hero-puntos i.activo::after { content: ""; position: absolute; inset: 0; background: #ffffff; transform-origin: left; animation: barra-foto 6.5s linear forwards; }
@keyframes barra-foto { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-scroll { display: inline-flex; align-items: center; gap: 0.6rem; }
.hero-scroll::after { content: ""; width: 1px; height: 2.5rem; background: linear-gradient(#ffffff, transparent); }

/* Botones sobre fotos y sobre rojo */
.boton.claro { --tinta-boton: #ffffff; background: transparent; color: #ffffff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.85); }
.boton.claro:hover { background: #ffffff; color: var(--noche); }
.boton.blanco { --tinta-boton: var(--rojo-oscuro); background: #ffffff; color: var(--rojo-oscuro); }
.boton.contorno { --tinta-boton: #ffffff; background: transparent; color: #ffffff; box-shadow: inset 0 0 0 2px #ffffff; }

/* ---------- Manifiesto ---------- */

.manifiesto .etiqueta { font-size: 0.8125rem; margin-bottom: 1.5rem; }
.frase-grande {
  font-family: var(--display);
  font-stretch: 85%;
  font-weight: 700;
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin-bottom: clamp(3rem, 2rem + 4vw, 6rem);
  color: var(--tinta);
}
.frase-grande .palabra { transition: color 300ms linear; }
.js .frase-grande[data-listo] .palabra { color: #d9d6de; }
.js .frase-grande[data-listo] .palabra.encendida { color: var(--tinta); }
.js .frase-grande[data-listo] .palabra.encendida.acento { color: var(--rojo-texto); }

.pilares {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  counter-reset: none;
}
.pilares li { border-top: 2px solid var(--tinta); padding-top: 1.25rem; position: relative; }
.pilares .numero { display: block; font-weight: 800; font-size: 0.875rem; letter-spacing: 0.1em; color: var(--rojo-texto); margin-bottom: 0.75rem; }
.pilares .display { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); text-transform: uppercase; margin-bottom: 0.4rem; }

/* ---------- Banda de foto ---------- */

.banda-foto {
  position: relative;
  height: clamp(16rem, 42vw, 34rem);
  overflow: hidden;
  background: var(--noche);
}
.banda-foto img {
  position: absolute;
  left: 0;
  top: -12%;
  width: 100%;
  height: 124%;
  object-fit: cover;
  object-position: 50% 40%;
}

/* ---------- Historia ---------- */

.relato { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
@media (min-width: 56rem) { .relato { grid-template-columns: 1fr 1.1fr; } }
.relato-foto { margin: 0; position: relative; }
.relato-foto img { width: 100%; border-radius: var(--radio); aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 50%; }
.relato-foto::after { content: ""; position: absolute; inset: auto -0.9rem -0.9rem auto; width: 45%; height: 45%; border: 3px solid var(--celeste); border-radius: var(--radio); z-index: -1; }
.relato-foto { isolation: isolate; }
.cita-fundadora { margin: 2rem 0; padding: 0 0 0 1.5rem; border-left: 4px solid var(--rojo); }
.cita-fundadora p { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); font-weight: 600; line-height: 1.45; color: var(--tinta); margin-bottom: 0.75rem; }
.cita-fundadora footer { font-size: 0.875rem; color: var(--tinta-suave); }

/* ---------- Cifras ---------- */

.cifras { padding-block: clamp(3rem, 2rem + 3vw, 5rem); border-block: 1px solid var(--linea); }
.cifras-fila { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
.cifra { display: grid; gap: 0.35rem; }
.cifra-num {
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: clamp(3rem, 2rem + 3vw, 5rem);
  line-height: 1;
  color: var(--rojo-texto);
  font-variant-numeric: tabular-nums;
}
.cifra:nth-child(even) .cifra-num { color: var(--celeste-texto); }
.cifra-txt { font-weight: 600; color: var(--tinta-suave); }
.cifras .nota { margin-top: 1.5rem; }

/* ---------- Programas ---------- */

.programas { display: grid; gap: 1.5rem; }
@media (min-width: 56rem) { .programas { grid-template-columns: 2fr 1fr; } }
.programa { border: 1px solid var(--linea); border-radius: calc(var(--radio) * 1.5); overflow: hidden; display: grid; background: #ffffff; }
.programa-grande { grid-template-rows: auto 1fr; }
@media (min-width: 40rem) { .programa-grande { grid-template-columns: 1fr 1fr; grid-template-rows: none; } }
.programa-foto { overflow: hidden; }
.programa-foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform 900ms var(--ease-suave); }
.programa-texto { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: flex; flex-direction: column; justify-content: center; }
.programa-texto .mas { margin-top: auto; padding-top: 1rem; }
@media (hover: hover) and (pointer: fine) { .programa:hover .programa-foto img { transform: scale(1.04); } }

/* ---------- Tarjetas ---------- */

a.tarjeta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--tinta);
  text-decoration: none;
  position: relative;
  transition: transform 300ms var(--ease-suave), box-shadow 300ms var(--ease-suave);
}
a.tarjeta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--rojo); transform: scaleX(0); transform-origin: left; transition: transform 450ms var(--ease-suave); border-radius: 4px 4px 0 0; }
a.tarjeta:nth-child(2)::before { background: var(--celeste); }
.tarjeta-num { font-weight: 800; font-size: 0.875rem; letter-spacing: 0.1em; color: var(--rojo-texto); }
a.tarjeta .mas { margin-top: auto; padding-top: 0.75rem; color: var(--rojo-texto); font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  a.tarjeta:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgb(28 27 31 / 0.35); }
  a.tarjeta:hover::before { transform: scaleX(1); }
}
a.tarjeta:focus-visible::before { transform: scaleX(1); }

/* ---------- Ciudades ---------- */

.ciudades { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ciudades li { padding: 0.45rem 1rem; border: 1.5px solid var(--linea); border-radius: 999px; font-weight: 600; }

/* ---------- Cierre rojo ---------- */

.cierre {
  --tinta: #ffffff;
  position: relative;
  overflow: hidden;
  background: var(--rojo-oscuro);
  color: var(--tinta);
  padding-block: clamp(5rem, 4rem + 6vw, 10rem);
  text-align: center;
}
.cierre-emblema { position: absolute; width: min(34rem, 80vw); left: 50%; top: 50%; translate: -50% -50%; opacity: 0.12; pointer-events: none; }
.cierre-contenido { position: relative; display: grid; justify-items: center; }
.cierre h2 { color: #ffffff; font-size: clamp(2.6rem, 1.6rem + 5vw, 6rem); }
.cierre p { color: #ffffff; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); }
.cierre .botones { justify-content: center; }

/* ---------- Movimiento ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero-fotos img.activa { animation: acercar 9s linear both; }
  @keyframes acercar { from { transform: scale(1.12); } to { transform: scale(1.0); } }
  .js .hero-titulo .linea > span { transform: translateY(105%); animation: subir 1.1s var(--ease-suave) forwards; }
  .js .hero-titulo .linea:nth-child(2) > span { animation-delay: 0.12s; }
  .js .hero-etiqueta, .js .hero-lema, .js .hero-botones, .js .hero-pie { opacity: 0; animation: llegar 0.9s var(--ease-suave) forwards; }
  .js .hero-etiqueta { animation-delay: 0.05s; }
  .js .hero-lema { animation-delay: 0.45s; }
  .js .hero-botones { animation-delay: 0.6s; }
  .js .hero-pie { animation-delay: 0.9s; }
  @keyframes subir { to { transform: none; } }
  @keyframes llegar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .cierre-emblema { animation: latido 2.4s ease-in-out infinite; }
  @keyframes latido { 0%, 100% { scale: 1; } 12% { scale: 1.04; } 24% { scale: 1; } 36% { scale: 1.03; } }
  .js .pilares li::before { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 100%; background: var(--rojo); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-suave) 200ms; }
  .js .pilares li.visible::before { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fotos img { transition: none; }
  .hero-puntos i.activo::after { animation: none; transform: none; }
}