/* Escalaria — hoja de estilo unica (portada + legales).
   La pagina SUBE: empieza en papel y termina en marino, que es el mismo gesto
   que hace la marca. Por eso NO hay modo oscuro: invertirlo romperia la unica
   idea sobre la que esta construida. */

:root {
  --marino:    #0A1A42;
  --marino-2:  #14275C;
  --marino-3:  #1B3168;
  --turquesa:  #00C0BD;
  --hondo:     #00706E;   /* turquesa legible sobre papel */
  --papel:     #F4F6FA;
  --blanco:    #FFFFFF;
  --tinta:     #0A1A42;
  --tinta-2:   #46557A;
  --linea:     #DCE3EF;
  --linea-2:   #EAEEF6;
  --ancho:     82rem;
  --paso:      clamp(3rem, 5.4vw, 5.2rem);
  --radio:     28px 4px;   /* la diagonal de la marca */
}

@font-face { font-family:'Poppins'; src:url(marca/fuentes/poppins-500.woff2) format('woff2');
             font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url(marca/fuentes/poppins-600.woff2) format('woff2');
             font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Plex'; src:url(marca/fuentes/ibm-plex-sans.woff2) format('woff2');
             font-weight:100 700; font-style:normal; font-display:swap; }
@font-face { font-family:'PlexMono'; src:url(marca/fuentes/ibm-plex-mono-500.woff2) format('woff2');
             font-weight:500; font-style:normal; font-display:swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1.125rem/1.62 'Plex', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.centro { width:100%; max-width: var(--ancho); margin-inline:auto;
          padding-inline: clamp(1.25rem, 4vw, 3.25rem); }

h1, h2, h3 { font-family:'Poppins', sans-serif; font-weight:600; margin:0; letter-spacing:-.02em;
             text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.2vw, 4.3rem); line-height: 1.02; }
h2 { font-size: clamp(1.85rem, 3.2vw, 2.75rem); line-height: 1.1; }
h3 { font-size: 1.3rem; line-height: 1.25; letter-spacing:-.012em; }
p  { margin: 0; }

.rotulo { font-family:'PlexMono', ui-monospace, monospace; font-weight:500;
          font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color: var(--hondo); }

a { color: var(--hondo); text-underline-offset:.18em; text-decoration-thickness:1px; }
a:focus-visible, .boton:focus-visible, button:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--turquesa); outline-offset: 3px; border-radius: 2px;
}

/* --- llamada a la accion -------------------------------------------------- */
.boton {
  display:inline-flex; align-items:center; gap:.6rem; border:0; cursor:pointer;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:1.02rem;
  padding:1rem 1.8rem; text-decoration:none;
  background: var(--marino); color: var(--blanco);
  border-radius: 22px 3px;
  transition: background .18s ease;
}
.boton:hover { background: var(--marino-2); }
.boton .flecha { transition: transform .18s ease; }
.boton:hover .flecha { transform: translateX(4px); }
.boton.menudo { font-size:.92rem; padding:.62rem 1.15rem; border-radius:16px 3px; }
.sobre-marino .boton { background: var(--turquesa); color: var(--marino); }
.sobre-marino .boton:hover { background: #2FD6D3; }

/* --- cabecera ------------------------------------------------------------- */
.cabecera .centro { display:flex; align-items:center; gap:1.5rem;
                    padding-block: clamp(1.1rem, 2vw, 1.7rem); }
.cabecera .marca img { display:block; width: clamp(178px, 17vw, 240px); height:auto; }
.cabecera nav { display:none; margin-left:auto; gap:1.9rem; }
.cabecera nav a { color: var(--tinta-2); text-decoration:none; font-size:.96rem; }
.cabecera nav a:hover { color: var(--tinta); }
.cabecera .boton { margin-left:auto; }
@media (min-width: 60rem) {
  .cabecera nav { display:flex; }
  .cabecera .boton { margin-left:0; }
}
@media (max-width: 34rem) { .cabecera .boton { display:none; } }

/* --- portada -------------------------------------------------------------- */
.portada { padding: clamp(1.5rem,3vw,3rem) 0 var(--paso); }
.portada .centro { display:grid; gap: clamp(2.5rem, 4vw, 4rem); align-items:center; }
@media (min-width: 64rem) { .portada .centro { grid-template-columns: 1.02fr .98fr; } }
.portada h1 { max-width: 16ch; }
.portada .entrada { font-size: clamp(1.12rem,1.5vw,1.28rem); max-width: 46ch;
                    color: var(--tinta-2); margin-top: 1.5rem; }
.portada .acciones { margin-top: 2.2rem; display:flex; align-items:center;
                     gap:1.1rem 1.7rem; flex-wrap:wrap; }
.portada .correo { font-family:'PlexMono',monospace; font-size:.95rem; color: var(--tinta-2);
                   text-decoration:none; }
.portada .correo:hover { color: var(--tinta); }

/* --- panel: la forma que tiene una respuesta util ------------------------- */
.panel {
  background: var(--blanco); border:1px solid var(--linea);
  border-radius: var(--radio); overflow:hidden; margin:0;
}
.panel.destacado { box-shadow: 0 18px 44px -30px rgba(10,26,66,.5); }
.panel-barra {
  display:flex; align-items:center; gap:.65rem;
  padding:.85rem 1.15rem; border-bottom:1px solid var(--linea-2);
  background: #FBFCFE;
  font-family:'PlexMono',monospace; font-size:.74rem; letter-spacing:.09em;
  text-transform:uppercase; color: var(--tinta-2);
}
.panel-barra .punto { width:8px; height:8px; border-radius:50%; background: var(--turquesa); flex:none; }
.panel-barra .lejos { margin-left:auto; color:#8D9AB6; }
.panel-cuerpo { padding: 1.5rem 1.35rem 1.4rem; display:grid; gap:1.15rem; }
.panel-cuerpo.apretado { padding: 1.15rem 1.15rem 1.2rem; gap:.85rem; }
/* La PREGUNTA que contesta el panel, siempre lo primero del cuerpo. Sin ella el
   panel ensena una respuesta a algo que el visitante no sabe que se preguntaba:
   los numeros se leen, pero no se entiende de que hablan. Lo comprueba
   tests/test_los_paneles_de_la_web_dicen_su_pregunta.py */
.panel-pregunta { font-size:.95rem; line-height:1.4; color: var(--tinta);
                  padding-left:.8rem; border-left:2px solid var(--turquesa); }
.panel.destacado .panel-pregunta { font-size:1.02rem; }

.cifra-fila { display:flex; align-items:baseline; gap:.9rem; }
.cifra { font-family:'Poppins',sans-serif; font-weight:600; font-size:clamp(2.4rem,4vw,3.1rem);
         line-height:1; letter-spacing:-.03em; }
.cifra::before { content:'↑'; color: var(--turquesa); margin-right:.2rem; }
.cifra-pie { font-size:.92rem; color: var(--tinta-2); line-height:1.35; }
.linea { width:100%; height:56px; display:block; }

.lectura { display:grid; gap:.15rem .9rem; margin:0; }
.lectura dt { font-family:'PlexMono',monospace; font-size:.72rem; letter-spacing:.09em;
              text-transform:uppercase; color: var(--tinta-2); }
.lectura dd { margin:0 0 .55rem; font-size:1rem; color: var(--tinta); }
.lectura dd:last-child { margin-bottom:0; }
.panel-accion span { font-family:'Poppins',sans-serif; font-weight:600; font-size:.95rem;
                     color: var(--hondo); }

.barras { list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.barras li { display:grid; grid-template-columns: minmax(7.5rem, auto) 1fr auto; gap:.85rem;
             align-items:center; font-size:.94rem; }
.barras .etiq { color: var(--tinta-2); }
.barras .barra { height:9px; border-radius:9px 2px; background: var(--marino);
                 width: var(--v); min-width:8px; }
.barras li:first-child .barra { background: var(--turquesa); }
.barras b { font-family:'PlexMono',monospace; font-weight:500; font-size:.86rem;
            font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.barras.finas li { grid-template-columns: minmax(6rem,auto) 1fr auto; }
.barras .apagada { opacity:.5; }

.cadena { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.cadena li { position:relative; padding:.6rem .9rem; font-size:.95rem;
             background: var(--papel); border-radius: 12px 2px; color: var(--tinta); }
.cadena li + li::before { content:'↓'; position:absolute; left:-.05rem; top:-.72rem;
                          font-size:.72rem; color: var(--turquesa); }
.cadena .fin { background: var(--marino); color:#E7ECF6; }

.burbuja { font-size:.96rem; padding:.7rem .95rem; border-radius:14px 4px; max-width:92%; }
.burbuja.suya { background: var(--papel); color: var(--tinta); }
.burbuja.mia  { background: var(--marino); color:#E7ECF6; margin-left:auto; border-radius:4px 14px; }
.nota-panel { font-family:'PlexMono',monospace; font-size:.72rem; letter-spacing:.05em;
              color:#8D9AB6; }

/* --- titulos de seccion, con el peldano de la marca ----------------------- */
.titulo-seccion { display:grid; gap:1rem; justify-items:start; }
.peldanos-glifo { width:44px; height:20px; display:block; }
.intro { max-width: 52ch; margin-top:1.1rem; color: var(--tinta-2); }

/* --- que puedo construir -------------------------------------------------- */
.capacidades { padding-block: var(--paso); border-top:1px solid var(--linea); }
.rejilla { margin-top: clamp(2.2rem,4vw,3.2rem); display:grid; gap: clamp(1.2rem,2vw,1.7rem); }
@media (min-width: 64rem) {
  /* Filas 60/40 y la segunda invertida: cuatro cosas distintas, no cuatro
     tarjetas iguales. El peso de cada una lo pone el tamano, no un numero. */
  .rejilla { grid-template-columns: 3fr 2fr; }
  .rejilla .capacidad:nth-child(3) { grid-column: 1; }
  .rejilla .capacidad:nth-child(4) { grid-column: 2; }
}
.capacidad {
  background: var(--blanco); border:1px solid var(--linea);
  border-radius: var(--radio); padding: clamp(1.5rem,2vw,2rem);
  display:grid; gap:1.4rem; align-content:start;
}
.capacidad-texto { display:grid; gap:.6rem; }
.capacidad-texto p { color: var(--tinta-2); font-size:1.02rem; }
.capacidad .panel { border-color: var(--linea-2); }

/* --- cosas construidas ---------------------------------------------------- */
.hechas { padding-block: var(--paso); border-top:1px solid var(--linea); }
.tres { margin-top: clamp(2.2rem,4vw,3.2rem); display:grid; gap: clamp(1.2rem,2vw,1.7rem); }
@media (min-width: 58rem) { .tres { grid-template-columns: repeat(3, 1fr); } }
.hecha { display:grid; gap:.7rem; align-content:start; }
.hecha p { color: var(--tinta-2); font-size:1rem; }
.hecha .panel { margin-top:.6rem; }

/* --- como trabajo --------------------------------------------------------- */
.reglas { padding-block: var(--paso); border-top:1px solid var(--linea); }
.lista-reglas { margin: clamp(2.2rem,4vw,3rem) 0 0; padding:0; list-style:none; display:grid; }
.lista-reglas li { padding: 1.8rem 0; border-top:1px solid var(--linea);
                   display:grid; gap:.6rem 2.2rem; align-items:start; }
.lista-reglas li:last-child { border-bottom:1px solid var(--linea); }
@media (min-width: 52rem) { .lista-reglas li { grid-template-columns: 6.5rem 1fr; } }
.ordinal { font-family:'Poppins',sans-serif; font-weight:600; font-size:2.6rem; line-height:.9;
           color:#C3CEE2; letter-spacing:-.03em; }
.lista-reglas h3 { margin-bottom:.35rem; }
.lista-reglas p { color: var(--tinta-2); max-width: 62ch; }

.apostilla { margin-top: clamp(2rem,3vw,2.6rem); padding: 1.7rem 1.8rem;
             background: var(--blanco); border:1px solid var(--linea);
             border-radius: var(--radio); display:grid; gap:.6rem; }
.apostilla h3 { color: var(--tinta); }
.apostilla p { color: var(--tinta-2); max-width: 68ch; }

/* --- lo alto de la escalera: marino --------------------------------------- */
.sobre-marino { background: var(--marino); color:#D9E1F0; }
.sobre-marino h2 { color: var(--blanco); }
.sobre-marino .rotulo { color: var(--turquesa); }
.sobre-marino a { color: var(--turquesa); }

.credito { padding-block: var(--paso); }
.credito .centro { display:grid; gap: clamp(2rem,4vw,3.5rem); }
@media (min-width: 64rem) { .credito .centro { grid-template-columns: 1fr 1fr; align-items:start; } }
.credito-titulo { display:grid; gap:1.2rem; justify-items:start; }
.credito h2 { font-size: clamp(2.1rem, 4.2vw, 3.5rem); line-height:1.05; }
.sello { margin: 1.4rem 0 0; display:grid; gap:1.15rem; justify-items:start; }
.peldanos-grandes { width: clamp(9rem, 15vw, 12.5rem); height:auto; display:block; }
.sello figcaption { display:grid; gap:.15rem; }
.sello b { font-family:'Poppins',sans-serif; font-weight:600; font-size:1.06rem; color: var(--blanco); }
.sello span { font-family:'PlexMono',monospace; font-size:.74rem; letter-spacing:.16em;
              text-transform:uppercase; color: var(--turquesa); }
.credito .cuerpo { display:grid; gap:1.15rem; max-width:52ch; }
.ambitos { list-style:none; margin:1.2rem 0 0; padding:1.4rem 0 0; display:grid; gap:.75rem;
           border-top:1px solid rgba(255,255,255,.16); }
@media (min-width: 40rem) { .ambitos { grid-template-columns: 1fr 1fr; gap:1.1rem 2rem; } }
.ambitos li { font-size:.98rem; color:#B9C6DF; }
.ambitos span { display:block; font-family:'PlexMono',monospace; font-size:.72rem;
                letter-spacing:.16em; text-transform:uppercase; color: var(--turquesa);
                margin-bottom:.15rem; }

/* --- cierre --------------------------------------------------------------- */
.cierre { padding-bottom: var(--paso); }
.cierre .caja { border-top:1px solid rgba(255,255,255,.16);
                padding-top: clamp(2.2rem,4vw,3.2rem);
                display:grid; gap: clamp(2rem,3.5vw,3.5rem); }
@media (min-width: 64rem) { .cierre .caja { grid-template-columns: 1fr 1fr; align-items:start; } }
.caja-dicho { display:grid; gap:1.1rem; }
.cierre h2 { max-width: 18ch; }
.cierre p { max-width: 44ch; }

.contar { display:grid; gap:1.05rem; }
.contar label { display:grid; gap:.45rem; }
.contar label span { font-family:'PlexMono',monospace; font-size:.74rem; letter-spacing:.1em;
                     text-transform:uppercase; color: var(--turquesa); }
.contar textarea, .contar input[type=email] {
  font: 400 1rem/1.5 'Plex', sans-serif; color: var(--blanco);
  background: var(--marino-3); border:1px solid rgba(255,255,255,.18);
  border-radius: 14px 3px; padding:.75rem .9rem; resize:vertical; width:100%;
}
.contar input[type=email] { resize:none; }
.contar textarea::placeholder, .contar input::placeholder { color:#7387AF; }
.contar textarea:focus, .contar input[type=email]:focus { border-color: var(--turquesa); }
/* La trampa antispam: fuera de la vista y fuera del recorrido de teclado, pero
   no `display:none` — hay robots que ignoran los campos ocultos asi. */
.contar .trampa { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.contar-pie { display:grid; gap:.9rem; justify-items:start; margin-top:.3rem; }
/* El acuse: si el envio falla se pinta en ambar, para que «no se ha enviado»
   no se lea igual que «recibido». */
.acuse { font-size:.95rem; color: var(--turquesa); margin:0; }
.acuse.mal { color:#F0B429; }
.letra-chica { font-size:.86rem; color:#93A4C6; max-width:44ch; }

/* --- pie ------------------------------------------------------------------ */
.pie { background: var(--marino); color:#93A4C6; font-size:.9rem; }
.pie .centro { padding-block: 2rem 2.8rem; border-top:1px solid rgba(255,255,255,.1);
               display:flex; flex-wrap:wrap; gap:.6rem 1.8rem; align-items:center; }
.pie a { color:#C2D0E8; text-decoration:none; }
.pie a:hover { text-decoration: underline; }
.pie .lejos { margin-left:auto; font-family:'PlexMono',monospace; font-size:.82rem; }

/* --- paginas legales ------------------------------------------------------ */
.documento { padding-block: clamp(1.5rem,3vw,2.5rem) var(--paso); max-width: 48rem; }
.documento h1 { font-size: clamp(2rem,4vw,2.9rem); margin-bottom:.6rem; }
.documento .fecha { font-family:'PlexMono',monospace; font-size:.82rem; color:var(--tinta-2); }
.documento h2 { font-size:1.35rem; margin-top:2.8rem; margin-bottom:.7rem; }
.documento p, .documento li { color: var(--tinta-2); }
.documento p + p { margin-top:.9rem; }
.documento ul { padding-left:1.15rem; margin:.9rem 0 0; display:grid; gap:.55rem; }
.documento dl { margin:1rem 0 0; display:grid; gap:.45rem .9rem; }
@media (min-width:40rem) { .documento dl { grid-template-columns: 11rem 1fr; } }
.documento dt { font-family:'PlexMono',monospace; font-size:.78rem; letter-spacing:.06em;
                text-transform:uppercase; color: var(--tinta); padding-top:.22rem; }
.documento dd { margin:0; color: var(--tinta-2); }
.volver { display:inline-block; margin-top:3rem; font-family:'PlexMono',monospace; font-size:.84rem; }