/* Soomba Radio — el diseño original: dos círculos que son las alas de la abeja
   y la intersección que es el cuerpo. Las estaciones viven en las franjas.
   Todo se mide en las mismas unidades del dibujo (900 x 520) usando cqw:
   1 unidad del dibujo = 0.11111cqw. Así el texto escala con la abeja. */

:root{
  --amarillo:  #ffd10d;
  --amarillo-claro: #ffe066;
  --oscuro:    #292929;
  --rojo:      #e4212f;
  /* Dos verdes para el hover, porque van sobre fondos opuestos: el nombre
     va sobre el lomo oscuro y el circulito sobre el ala amarilla. Con uno
     solo, el circulito quedaba en 1,62:1 contra el amarillo — invisible
     justo en el momento en que hay que invitar a tocarlo. */
  --verde:      #45bf5c;   /* sobre el oscuro: 6,1:1 */
  --verde-hoja: #0f6b22;   /* sobre el amarillo: 4,6:1 */
  --blanco:    #fff;
  --u: 0.11111cqw;              /* una unidad del dibujo */
  --tipo: Museo, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

[hidden]{ display:none !important; }

html,body{ height:100%; }

body{
  font-family:var(--tipo);
  background:#101510;
  color:var(--oscuro);
  overflow-x:hidden;
}

/* La portada: el dibujo ocupa la pantalla entera y nada la interrumpe */
.portada{
  position:relative;
  overflow:hidden;
  background:#101510;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2vh;
  padding:3vh 3vw;
}

/* ---------- Fondo de selva ---------- */

.fondo{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  transition:opacity 1.6s ease;
  z-index:0;
}
.fondo.visible{ opacity:1; }

.velo{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.18) 0%, rgba(0,0,0,.45) 100%);
  z-index:0;
}

/* ---------- La escena: la abeja y lo que va encima ---------- */

.escena{
  position:relative;
  z-index:1;
  width:min(100%, 1180px, calc(78svh * 900 / 520));
  aspect-ratio: 900 / 520;
  container-type:inline-size;
  filter:drop-shadow(0 calc(var(--u)*10) calc(var(--u)*30) rgba(0,0,0,.35));
}

.abeja{ position:absolute; inset:0; width:100%; height:100%; }

/* Las alas: cajas de contenido centradas en cada círculo */
.ala{
  position:absolute;
  top:50%;
  /* ancho y centro se fijan por ala: cada una tiene que esquivar el cuerpo */
  transform:translateY(-50%);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(var(--u)*14);
}
.ala-izq{ left:24cqw;     margin-left:-16.665cqw; width:33.33cqw; }  /* centro en x=216 */
.ala-der{ left:73.333cqw; margin-left:-13cqw;   width:26cqw; }  /* centro en x=660 */

/* 215 unidades de ancho, que es lo que mide en Pantalla-1.ai. El PNG está
   recortado a su dibujo, así que la medida es la del logo y no la del archivo. */
.marca{ font-size:0; line-height:0; }   /* el h1 es el logo, no un texto */

.logo{ width:calc(var(--u)*215); display:block; }
.marca .logo-claro{ display:none; }   /* después de .logo, si no le gana */

/* ---------- El cuerpo: las estaciones ---------- */

.cuerpo{
  position:absolute;
  /* Arriba de las alas: la franja se pasa 17 unidades adentro del ala derecha
     —lo necesita para que quepan los nombres largos— y como el ala va después
     en el HTML, le ganaba y se comía el click en el borde de cada botón. */
  z-index:3;
  left:42.222cqw;                  /* x = 380 */
  width:15.556cqw;                 /* 140 unidades */
  top:0; height:100%;
}

.franja{
  position:absolute;
  left:calc(var(--u)*-40);         /* deja respirar el texto largo */
  width:calc(100% + var(--u)*80);
  height:10%;                      /* 52 de 520 */
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; padding:0;
  font-family:var(--tipo);
  /* 24 y no 26: a 26, "RETRO 80" mide 139 unidades y el lomo oscuro entero
     —franja más trazo— da 140. Quedaba tocando el amarillo de los dos lados. */
  font-size:calc(var(--u)*24);
  font-weight:300;
  letter-spacing:calc(var(--u)*2.2);
  padding-left:calc(var(--u)*2.2);   /* compensa el espacio que la separación
                                        de letras deja colgando a la derecha */
  color:var(--blanco);
  cursor:pointer;
  transition:color .18s ease, transform .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.franja:nth-child(1){ top:28.846%; }   /* HITS     */
.franja:nth-child(2){ top:45%;     }   /* RETRO 80 */
.franja:nth-child(3){ top:61.154%; }   /* LATINA   */

/* El play va AFUERA del lomo, sobre el amarillo.
   Adentro no entra: el lomo deja 116 unidades limpias en el medio y 86 arriba
   y abajo, y "RETRO 80" con el play se come 134. Achicar la tipografía hasta
   que entre la deja en 16 unidades, ilegible. Afuera, además, el oscuro sobre
   amarillo contrasta mucho más que el blanco sobre oscuro. */
.play-chico{
  position:absolute;
  top:50%;
  width:calc(var(--u)*21);
  height:auto;
  transform:translateY(-50%);
  color:var(--oscuro);              /* el círculo y el triángulo salen de acá */
  transition:color .18s ease, transform .18s ease;
}
/* Cada uno pegado al borde del lomo, que es más ancho en el medio */
.franja:nth-child(1) .play-chico,
.franja:nth-child(3) .play-chico{ left:calc(var(--u)*16); }
.franja:nth-child(2) .play-chico{ left:0; }

.franja:hover .play-chico{ transform:translateY(-50%) scale(1.12); }
.franja.activa .play-chico,
.franja.activa:hover .play-chico{ color:var(--rojo); }
.franja.muda   .play-chico{ opacity:.32; }

/* El circulito de la señal que está sonando muestra pausa, no play:
   es lo único que dice que se puede parar. */
.ico-pausa-chico{ display:none; }
.franja.sonando .ico-pausa-chico{ display:block; }
.franja.sonando .ico-play-chico{ display:none; }

.franja:hover,
.franja:focus-visible{ transform:scale(1.06); color:var(--verde); }
.franja:hover .play-chico,
.franja:focus-visible .play-chico{ color:var(--verde-hoja); }

/* Rojo es "esta está sonando". Le gana al verde del hover. */
.franja.activa,
.franja.activa:hover{ color:var(--rojo); }

/* Al entrar, las tres se encienden una atrás de la otra: es lo que avisa que
   son botones. Pasa dos veces —el ciclo dura 4 s y el encendido se come el
   primer cuarto— porque el que llega mirando el fondo se pierde la primera. */
.presenta .franja      { animation:destello      4s ease 2; }
.presenta .play-chico  { animation:destello-play 4s ease 2; }
.presenta .franja:nth-child(1),
.presenta .franja:nth-child(1) .play-chico{ animation-delay:1.6s;  }
.presenta .franja:nth-child(2),
.presenta .franja:nth-child(2) .play-chico{ animation-delay:1.85s; }
.presenta .franja:nth-child(3),
.presenta .franja:nth-child(3) .play-chico{ animation-delay:2.1s;  }

@keyframes destello{
  0%,25%,100% { color:var(--blanco); transform:scale(1); }
  9%          { color:var(--rojo);   transform:scale(1.05); }
}

@keyframes destello-play{
  0%,25%,100% { color:var(--oscuro); transform:translateY(-50%) scale(1); }
  9%          { color:var(--rojo);   transform:translateY(-50%) scale(1.22); }
}
.franja.muda{ color:rgba(255,255,255,.38); }
/* El hover le tiene que ganar a "apagada": si no, la que no suena no se
   enciende al pasarle el mouse, que es justo cuando hay que invitar a tocarla. */
.franja.muda:hover,
.franja.muda:focus-visible{ color:var(--verde); }
.franja.muda:hover .play-chico,
.franja.muda:focus-visible .play-chico{ color:var(--verde-hoja); opacity:1; }
.franja:focus-visible{ outline:calc(var(--u)*3) solid var(--rojo); outline-offset:calc(var(--u)*3); border-radius:calc(var(--u)*6); }

/* ---------- Ala derecha: presentación y reproductor ---------- */

.presentacion{ text-align:left; }
.presentacion .lema-chico{
  font-size:calc(var(--u)*34);
  font-weight:300;
  line-height:1.1;
  letter-spacing:calc(var(--u)*.5);
}
.presentacion .lema-grande{
  margin-top:calc(var(--u)*12);
  font-size:calc(var(--u)*40);
  font-weight:900;
  line-height:1.05;
}

.player{
  display:flex; flex-direction:column; align-items:center;
  gap:calc(var(--u)*10);
  width:100%;
  position:relative;
}

.volver{
  display:none;
  position:absolute; top:calc(var(--u)*-46); left:0;
  background:none; border:0;
  font-size:calc(var(--u)*46); line-height:1;
  color:var(--oscuro); cursor:pointer;
}

.tapa{
  width:calc(var(--u)*150); height:calc(var(--u)*150);
  background:var(--oscuro);
  border-radius:calc(var(--u)*6);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 calc(var(--u)*6) calc(var(--u)*16) rgba(0,0,0,.3);
}
.tapa img{ width:100%; height:100%; object-fit:cover; display:block; }
.tapa-abeja{
  width:60%; height:60%;
  background:url(img/abeja.png) center/contain no-repeat;
  filter:brightness(0) invert(1) opacity(.35);
}
.tapa:has(img:not([hidden])) .tapa-abeja{ display:none; }

.tema{
  font-size:calc(var(--u)*22);
  font-weight:700;
  line-height:1.2;
  max-width:100%;
}
.artista{
  font-size:calc(var(--u)*17);
  font-weight:500;
  opacity:.72;
  margin-top:calc(var(--u)*-4);
}

.mandos{
  display:flex; align-items:center; gap:calc(var(--u)*14);
  margin-top:calc(var(--u)*4);
}

.play{
  width:calc(var(--u)*52); height:calc(var(--u)*52);
  border-radius:50%;
  border:calc(var(--u)*4) solid var(--oscuro);
  background:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.play:hover{ transform:scale(1.08); background:rgba(0,0,0,.06); }
.play svg{ width:55%; height:55%; fill:var(--oscuro); }
.play.cargando{ animation:latido 1s ease-in-out infinite; }
@keyframes latido{ 50%{ opacity:.4; } }

.volumen{
  -webkit-appearance:none; appearance:none;
  width:calc(var(--u)*110); height:calc(var(--u)*5);
  background:rgba(41,41,41,.32);
  border-radius:999px;
  cursor:pointer;
}
.volumen::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:calc(var(--u)*15); height:calc(var(--u)*15);
  border-radius:50%; background:var(--oscuro);
}
.volumen::-moz-range-thumb{
  width:calc(var(--u)*15); height:calc(var(--u)*15);
  border:0; border-radius:50%; background:var(--oscuro);
}

.oyentes{
  font-size:calc(var(--u)*14);
  font-weight:600;
  opacity:.6;
  min-height:calc(var(--u)*18);
}

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

.sin-js{
  max-width:24rem;
  font-size:.85rem;
  color:#fff;
  background:rgba(0,0,0,.6);
  padding:.5rem .9rem;
  border-radius:999px;
  text-align:center;
}

.pie{
  display:flex; flex-direction:column; align-items:center;
  gap:1.1rem; z-index:3;
}
.redes{ display:flex; gap:1.2rem; }
.redes a{
  width:2.1rem; height:2.1rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  transition:transform .15s ease, filter .15s ease;
}
.redes a:hover,
.redes a:focus-visible{ transform:translateY(-2px); filter:brightness(1.12); }
.redes svg{ width:58%; height:58%; }

/* Cada red con su color, como en el diseño original */
.redes .ig{
  background:radial-gradient(circle at 28% 104%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 62%, #285aeb 92%);
}
.redes .fb{ background:#1877f2; }
.redes .ig svg,
.redes .fb svg{ fill:#fff; }

.redes .mail{ background:#fff; }
.redes .mail svg{ fill:var(--oscuro); }

/* ---------- Celular: como las pantallas iOS del diseño ----------
   Las alas se van de cuadro por los costados y queda el cuerpo de la abeja
   con las estaciones. Acá la unidad de dibujo se mide contra el ALTO
   (1 unidad = alto/520), porque el ancho ya no entra en la pantalla. */

@media (max-width: 820px){

  body{ padding:0; gap:0; }

  /* Alto exacto, no mínimo: con min-height el navegador no le da un alto
     definido a la escena y las unidades del dibujo (cqh) se van a cero, que
     es lo mismo que decir que las estaciones desaparecen. */
  .portada{ height:100svh; min-height:0; padding:0; gap:0; }

  .escena{
    flex:1; min-height:0;
    width:100%; max-width:none;
    aspect-ratio:auto;
    container-type:size;
    /* La unidad del dibujo sale del ALTO, pero con el mismo tope que la abeja:
       si no, en una ventana angosta y alta el dibujo se achica y el texto y
       los circulitos siguen creciendo, y terminan afuera de la pantalla.
       El 86% deja arriba una franja limpia para la marca: a pantalla completa,
       los dos arcos de las alas cruzaban por adentro de SOOMBA y le partían
       las letras al medio. */
    --u: calc(min(86cqh, 210vw) / 520);
    display:block;
  }

  .abeja{
    position:absolute;
    top:0; left:50%;
    transform:translateX(-50%);
    height:100%; width:auto;
    aspect-ratio:900 / 520;
    max-width:none;
  }

  /* El cuerpo se centra a mano: el ancho de la escena ya no es el del dibujo */
  .cuerpo{
    left:50%;
    transform:translateX(-50%);
    width:calc(var(--u)*140);
  }
  .franja{ font-size:calc(var(--u)*21); }

  .ala{
    position:absolute;
    left:50%; margin-left:0;
    transform:translateX(-50%);
    width:min(80vw, 330px);
    top:auto;
  }
  .ala-izq{ top:calc(var(--u)*30); }
  .logo{ width:min(62vw, 250px); }
  /* Arriba del dibujo hay foto, no amarillo: va la versión blanca */
  .marca .logo-oscuro{ display:none; }
  .marca .logo-claro{ display:block; filter:drop-shadow(0 2px 10px rgba(0,0,0,.55)); }

  /* Y una sombra suave arriba, para que el blanco se lea contra cualquier
     foto: hay selvas con el cielo blanco y otras casi negras. */
  .portada::before{
    content:'';
    position:absolute; inset:0 0 auto 0;
    height:26%;
    background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0));
    z-index:0;
    pointer-events:none;
  }

  .ala-der{ display:none; }

  /* Con una estación elegida el reproductor ocupa la pantalla, como en iOS */
  body.sonando .ala-izq,
  body.sonando .cuerpo,
  body.sonando .abeja{ display:none; }

  body.sonando .escena{
    display:flex; align-items:center; justify-content:center;
    background:var(--amarillo);
    border-radius:0;
  }
  body.sonando .ala-der{
    display:flex;
    position:static; transform:none;
    width:min(86vw, 360px);
    gap:1rem;
  }
  body.sonando .presentacion{ display:none; }

  /* La flecha va contra la esquina de la pantalla, no del reproductor */
  body.sonando .player{ position:static; }
  body.sonando .volver{
    display:flex; align-items:center; justify-content:center;
    position:absolute;
    top:.5rem; left:.6rem;
    width:48px; height:48px;      /* el mínimo para tocar con el dedo */
    font-size:2.2rem; line-height:1;
  }
  body.sonando .tapa{ width:min(60vw,250px); height:min(60vw,250px); border-radius:8px; }
  body.sonando .tema{ font-size:1.2rem; }
  body.sonando .artista{ font-size:.95rem; margin-top:0; }
  body.sonando .play{ width:66px; height:66px; border-width:4px; }
  body.sonando .volumen{ width:180px; height:5px; }
  body.sonando .volumen::-webkit-slider-thumb{ width:16px; height:16px; }
  body.sonando .volumen::-moz-range-thumb{ width:16px; height:16px; }
  body.sonando .mandos{ gap:1rem; margin-top:.3rem; }
  body.sonando .oyentes{ font-size:.8rem; }

  .pie{ padding:1rem 0 1.4rem; }
}

/* ---------- Celular acostado ----------
   A 812x375 —un iPhone acostado— la escena mide 263 px de alto y el
   reproductor pedía 390: la tapa quedaba cortada arriba y el botón de pausa
   caía abajo del panel, encima de la foto. O sea: no se podía parar la radio.
   Acá se achica todo, se saca el logo —que además se montaba sobre la abeja—
   y se deja que la escena crezca y scrollee si hace falta. */

@media (max-width: 820px) and (max-height: 560px){

  .ala-izq{ display:none; }

  .portada{ height:auto; min-height:100svh; }
  .escena{ min-height:70svh; }

  body.sonando .portada{ height:auto; }
  body.sonando .escena{
    min-height:0;
    padding:1.1rem 0 .6rem;
    align-items:center;
  }
  body.sonando .player{ gap:.5rem; }
  body.sonando .ala-der{ width:min(92vw, 420px); gap:.55rem; }
  body.sonando .tapa{ width:min(30vh, 128px); height:min(30vh, 128px); }
  body.sonando .tema{ font-size:1rem; }
  body.sonando .artista{ font-size:.85rem; }
  body.sonando .play{ width:54px; height:54px; border-width:3px; }
  body.sonando .volumen{ width:140px; }
  body.sonando .mandos{ gap:.9rem; margin-top:.1rem; }
  body.sonando .oyentes{ font-size:.75rem; }
  body.sonando .volver{ top:.5rem; left:.7rem; font-size:2rem; }

  .pie{ padding:.6rem 0 1rem; }
  .menu{ gap:1.1rem; }
  .menu a{ font-size:.8rem; }
}

/* ---------- Ventana angosta y alta ----------
   Con el navegador angostado en la compu, o en tablet a pantalla partida, la
   abeja se mide contra el alto y el circulito de play de RETRO 80 se iba de
   la pantalla por la izquierda. Se le pone tope al alto del dibujo. */

@media (max-width: 820px){
  /* El dibujo ocupa el 86% del alto y va corrido para abajo, así arriba queda
     lugar limpio para la marca. El alto y el 86cqh de --u tienen que ser el
     mismo número: si se despegan, el texto deja de caer sobre las franjas. */
  .abeja,
  .cuerpo{
    top:57%;
    max-height:min(86%, 210vw);
    transform:translate(-50%, -50%);
  }
}

@media (prefers-reduced-motion: reduce){
  .fondo{ transition:none; }
  .franja, .play, .pie a{ transition:none; }
}

/* ---------- Museo, la tipografía del diseño original ----------
   OJO: los .otf son licencia de escritorio. Para publicarlos en la web hace
   falta la licencia web de exljbris (o cambiarlos por una libre parecida).
   Están puestos porque son los del diseño; la decisión es de Marcos. */

@font-face{ font-family:Museo; src:url(fuentes/Museo-Regular-300.otf) format('opentype'); font-weight:300; font-display:swap; }
@font-face{ font-family:Museo; src:url(fuentes/Museo-Regular-500.otf) format('opentype'); font-weight:500; font-display:swap; }
@font-face{ font-family:Museo; src:url(fuentes/Museo-Regular-700.otf) format('opentype'); font-weight:700; font-display:swap; }
@font-face{ font-family:Museo; src:url(fuentes/Museo-Regular-900.otf) format('opentype'); font-weight:900; font-display:swap; }

/* ---------- Las tres abejitas, como en el video original ----------
   Van y vienen solas, cada una con su recorrido y su ritmo. Las alas son
   blancas para que se recorten contra la selva. Todo en CSS: no hay temporizador
   que se desincronice ni nada que hacer cuando la pestaña queda en segundo plano. */

.abejas{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }

.abejita{
  position:absolute;
  width:clamp(52px, 6.5vw, 98px);
  height:auto;
  opacity:0;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));
  will-change:transform, opacity;
}

.abejita.a1{ top:16%; left:0; animation:cruza-derecha 41s linear 2s infinite; }
.abejita.a2{ top:64%; left:0; width:clamp(38px, 4.6vw, 70px);
             animation:cruza-izquierda 56s linear 19s infinite; }
.abejita.a3{ top:38%; left:0; width:clamp(30px, 3.6vw, 54px);
             animation:cruza-diagonal 73s linear 38s infinite; }

@keyframes cruza-derecha{
  0%   { transform:translate(-16vw, 0)      rotate(-7deg); opacity:0;   }
  2%   { opacity:.96; }
  9%   { transform:translate(24vw, -7vh)    rotate(6deg);  }
  17%  { transform:translate(56vw, 5vh)     rotate(-8deg); }
  25%  { transform:translate(88vw, -5vh)    rotate(5deg);  }
  32%  { opacity:.96; }
  34%  { transform:translate(118vw, 1vh)    rotate(0deg);  opacity:0; }
  100% { transform:translate(118vw, 1vh); opacity:0; }
}

@keyframes cruza-izquierda{
  0%   { transform:translate(114vw, 0) scaleX(-1) rotate(6deg); opacity:0;   }
  2%   { opacity:.96; }
  10%  { transform:translate(78vw, 6vh) scaleX(-1) rotate(-5deg); }
  18%  { transform:translate(44vw, -6vh) scaleX(-1) rotate(7deg); }
  25%  { opacity:.96; }
  27%  { transform:translate(-18vw, 3vh) scaleX(-1) rotate(0deg); opacity:0; }
  100% { transform:translate(-18vw, 3vh) scaleX(-1); opacity:0; }
}

@keyframes cruza-diagonal{
  0%   { transform:translate(-14vw, 26vh)  rotate(-14deg); opacity:0;   }
  3%   { opacity:.9; }
  10%  { transform:translate(30vw, 4vh)    rotate(-6deg);  }
  16%  { transform:translate(66vw, -14vh)  rotate(-12deg); }
  21%  { opacity:.9; }
  23%  { transform:translate(116vw, -26vh) rotate(-8deg);  opacity:0; }
  100% { transform:translate(116vw, -26vh); opacity:0; }
}

/* ---------- Menú y redes de la portada ---------- */

.menu{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:1.6rem;
}
.menu a{
  color:#fff;
  text-decoration:none;
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.04em;
  padding-bottom:.2rem;
  border-bottom:2px solid transparent;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
  transition:border-color .15s ease, color .15s ease;
}
.menu a:hover,
.menu a:focus-visible{ color:var(--amarillo); border-bottom-color:var(--amarillo); }

@media (prefers-reduced-motion: reduce){
  /* Antes acá decía .abeja-vuela, que es el nombre viejo: no existía en el
     HTML, así que con "reducir movimiento" puesto seguían corriendo las seis
     animaciones igual. */
  .abejas{ display:none; }
  .presenta .franja,
  .presenta .play-chico,
  .flechita,
  .play.cargando{ animation:none !important; }
}


/* ---------- Las pestañas de abajo ----------
   Fondo propio y opaco: la selva es de la portada y no se tiene que colar. */

.hoja{
  position:relative;
  z-index:1;
  background:var(--oscuro);
  color:#f2f0ea;
  padding:clamp(3.5rem, 9vh, 6rem) 6vw;
  scroll-margin-top:0;
}

.hoja-clara{ background:var(--amarillo); color:var(--oscuro); }

.ancho{ max-width:900px; margin:0 auto; }

.hoja h2{
  font-size:clamp(1.7rem, 4vw, 2.6rem);
  font-weight:900;
  letter-spacing:-.01em;
  margin-bottom:1.1rem;
  text-wrap:balance;
}
.hoja h2::after{
  content:'';
  display:block;
  width:2.6rem; height:5px;
  margin-top:.7rem;
  background:var(--amarillo);
  border-radius:3px;
}
.hoja-clara h2::after{ background:var(--oscuro); }

.hoja .lead{
  font-size:clamp(1.02rem, 1.9vw, 1.24rem);
  font-weight:500;
  line-height:1.55;
  max-width:60ch;
}
.hoja p{ line-height:1.65; max-width:60ch; }
.hoja .lead + p{ margin-top:.9rem; opacity:.85; }

/* Somos / No somos: las dos columnas del relato de marca */
.dos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:2rem 3rem;
  margin-top:2.6rem;
}
.columna h3{
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:.9rem;
}
.columna.somos h3{ color:var(--amarillo); }
.columna.no-somos h3{ color:#8b8b8b; }

.columna ul{ list-style:none; display:flex; flex-direction:column; gap:.62rem; }
.columna li{
  position:relative;
  padding-left:1.4rem;
  line-height:1.45;
  font-size:.98rem;
}
.columna li::before{
  position:absolute; left:0; top:0;
  font-weight:700;
}
.columna.somos li::before{ content:'+'; color:var(--amarillo); }
.columna.no-somos li::before{ content:'\2013'; color:#8b8b8b; }   /* raya, escapada en CSS */
.columna.no-somos li{ color:#a8a8a8; }

/* Los valores, como las franjas del lomo */
.valores{
  list-style:none;
  display:flex; flex-wrap:wrap; gap:.55rem;
  margin:2.2rem 0 0;
}
.valores li{
  background:var(--oscuro);
  color:var(--amarillo);
  padding:.42rem .95rem;
  border-radius:999px;
  font-size:.86rem;
  font-weight:500;
  letter-spacing:.02em;
}

.remate{
  margin-top:2.2rem;
  font-size:clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight:900;
}

.contacto{ list-style:none; max-width:520px; margin-top:2rem; display:flex; flex-direction:column; gap:.9rem; }
.contacto li{
  display:flex; align-items:baseline; gap:1rem;
  border-bottom:1px solid rgba(255,255,255,.12);
  padding-bottom:.8rem;
}
.contacto span{
  min-width:6.5rem;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.55;
}
.contacto a{ color:var(--amarillo); text-decoration:none; font-weight:500; }
.contacto a:hover{ text-decoration:underline; }

.firma{ margin-top:2.4rem; font-size:.82rem; opacity:.45; }

/* Lo que falta completar se marca solo, para que no se publique así */
[data-completar]{ outline:2px dashed #e4212f; outline-offset:3px; }

@media (max-width: 820px){
  .hoja{ padding:3rem 7vw; }
  .contacto li{ flex-direction:column; gap:.15rem; }
  .contacto span{ min-width:0; }
}


/* ---------- "Elegí tu señal" ----------
   La flechita apunta al lomo de la abeja, que es donde están las estaciones. */

.pista{
  display:flex; align-items:center;
  gap:calc(var(--u)*8);
  margin-top:calc(var(--u)*22);
  font-size:calc(var(--u)*17);
  font-weight:500;
  letter-spacing:.02em;
  opacity:.72;
}
.flechita{
  width:calc(var(--u)*11);
  height:auto;
  fill:var(--rojo);
  animation:apuntar 2.4s ease-in-out infinite;
}
@keyframes apuntar{
  0%,100% { transform:translateX(0); }
  50%     { transform:translateX(calc(var(--u)*-6)); }
}

@media (max-width: 820px){
  .pista{ display:none; }   /* en el celular el lomo ocupa la pantalla entera */
}