/* ═══════════════════════════════════════════════════════════════════
   Exámenes internacionales · Make English Easy Org
   Identidad PROPIA, distinta del HUB a propósito: el HUB es la escuela,
   esto es una guía de referencia. Papel claro, tinta azul petróleo y un
   acento por examen. Sin tipografías de fuera: la primera pantalla tiene
   que estar antes de que el celular termine de pensar.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --tinta:#13202b;
  --tinta2:#5a6b7a;
  --tinta3:#8695a3;
  --papel:#f6f4ef;
  --panel:#ffffff;
  --linea:#e2ddd3;
  --linea2:#cfc8ba;
  --acento:#0f4c5c;
  --acento-cl:#e6f0f1;
  --sombra:0 1px 2px rgba(19,32,43,.05), 0 8px 24px rgba(19,32,43,.06);
  --radio:14px;
  --ancho:980px;
}

/* Un color por examen. Se pone en <body data-ex="..."> y tiñe la cabecera,
   los títulos de sección y los bordes de las tarjetas de esa página. */
body[data-ex="ia"]  { --acento:#9d2b3b; --acento-cl:#fbeced; }
body[data-ex="igt"] { --acento:#a35a12; --acento-cl:#fbf0e2; }
body[data-ex="toefl"]{ --acento:#1f4f8f; --acento-cl:#e8eef9; }
body[data-ex="toeic"]{ --acento:#39642a; --acento-cl:#ecf3e7; }
body[data-ex="comp"] { --acento:#4b3b7a; --acento-cl:#efecf8; }
/* practice.html se queda con el azul petroleo de la marca, el mismo de la
   franja del HUB de donde viene el clic: es la unica pagina que no es la
   guia de un examen, asi que no toma color de examen. */
body[data-ex="prac"] { --acento:#0f4c5c; --acento-cl:#e6f0f1; }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font:16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
       "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}

/* ── Cabecera ─────────────────────────────────────────────────────── */
.cab{background:var(--acento); color:#fff; padding:0}
.cab-in{max-width:var(--ancho); margin:0 auto; padding:14px 18px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.cab a{color:#fff; text-decoration:none}
.cab .marca{font-weight:800; letter-spacing:.01em; font-size:15px;
  display:flex; align-items:baseline; gap:7px}
.cab .marca small{font-weight:600; opacity:.72; font-size:11.5px;
  letter-spacing:.09em; text-transform:uppercase}
.cab .volver{margin-left:auto; font-size:13px; font-weight:600;
  border:1px solid rgba(255,255,255,.4); border-radius:999px;
  padding:5px 13px; white-space:nowrap}
.cab .volver:hover{background:rgba(255,255,255,.14)}

/* ── Navegación entre exámenes ────────────────────────────────────── */
.nav{background:#fff; border-bottom:1px solid var(--linea);
  position:sticky; top:0; z-index:20}
.nav-in{max-width:var(--ancho); margin:0 auto; padding:0 18px;
  display:flex; gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch}
.nav a{flex:0 0 auto; padding:11px 12px; font-size:13.5px; font-weight:600;
  color:var(--tinta2); text-decoration:none; white-space:nowrap;
  border-bottom:3px solid transparent}
.nav a:hover{color:var(--tinta)}
.nav a.on{color:var(--acento); border-bottom-color:var(--acento)}

/* ── Caja general ─────────────────────────────────────────────────── */
.caja{max-width:var(--ancho); margin:0 auto; padding:0 18px 56px}

.hero{padding:34px 0 10px}
.hero h1{margin:0 0 10px; font-size:clamp(25px,5.4vw,40px); line-height:1.18;
  letter-spacing:-.015em; font-weight:800}
.hero p{margin:0; font-size:clamp(16px,2.6vw,18.5px); color:var(--tinta2);
  max-width:62ch}
.hero .sello{display:inline-block; margin:0 0 12px; font-size:11.5px;
  font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--acento); background:var(--acento-cl); border-radius:999px;
  padding:4px 12px}

h2{margin:40px 0 4px; font-size:clamp(20px,3.6vw,25px); line-height:1.25;
  letter-spacing:-.01em; font-weight:800}
h2 + .lede{margin:0 0 18px; color:var(--tinta2); max-width:64ch}
h3{margin:26px 0 8px; font-size:17.5px; font-weight:750; letter-spacing:-.005em}
h4{margin:18px 0 6px; font-size:15px; font-weight:750}
p{margin:0 0 12px}
a{color:var(--acento)}

/* ── Tarjetas ─────────────────────────────────────────────────────── */
.rejilla{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.tarjeta{background:var(--panel); border:1px solid var(--linea);
  border-radius:var(--radio); padding:18px 18px 16px; box-shadow:var(--sombra);
  display:flex; flex-direction:column}
.tarjeta h3{margin:0 0 2px; font-size:18px}
.tarjeta .para{font-size:12px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; margin:0 0 9px}
.tarjeta p{font-size:14.5px; color:var(--tinta2); margin:0 0 12px}
.tarjeta .ir{margin-top:auto; font-weight:700; font-size:14px;
  text-decoration:none}
.tarjeta .ir:after{content:" →"}
.t-ia  {border-top:4px solid #9d2b3b} .t-ia   .para,.t-ia   .ir{color:#9d2b3b}
.t-igt {border-top:4px solid #a35a12} .t-igt  .para,.t-igt  .ir{color:#a35a12}
.t-toefl{border-top:4px solid #1f4f8f} .t-toefl .para,.t-toefl .ir{color:#1f4f8f}
.t-toeic{border-top:4px solid #39642a} .t-toeic .para,.t-toeic .ir{color:#39642a}
.t-comp{border-top:4px solid #4b3b7a} .t-comp .para,.t-comp .ir{color:#4b3b7a}

/* ── Panel (bloques de contenido) ─────────────────────────────────── */
.panel{background:var(--panel); border:1px solid var(--linea);
  border-radius:var(--radio); padding:18px; box-shadow:var(--sombra);
  margin:0 0 16px}
.panel > :first-child{margin-top:0}
.panel > :last-child{margin-bottom:0}

/* -- practice.html: el aviso de los practice tests ----------------- */
/* La pagina es corta: en un monitor grande el pie quedaba flotando a media
   pantalla. Se empuja abajo SOLO aca -las seis guias son largas y no
   necesitan nada-. */
body[data-ex="prac"]{display:flex; flex-direction:column; min-height:100vh;
  min-height:100svh}
body[data-ex="prac"] .caja{flex:1 0 auto}
body[data-ex="prac"] .pie{margin-top:0}

.no-inscrito{max-width:62ch; margin-top:18px}
.no-inscrito p{font-size:15.5px; color:var(--tinta2); margin:0 0 18px}
/* El boton es el mismo gesto que el .btn-primario del HUB (pildora solida,
   peso 900, flecha al final) pero con el verde de WhatsApp: se sabe lo que
   va a abrir antes de tocarlo. */
.btn-wa{display:inline-flex; align-items:center; gap:9px;
  background:#25d366; color:#06281a; text-decoration:none;
  font-weight:900; font-size:15px; line-height:1.2;
  padding:13px 20px; border-radius:13px;
  box-shadow:0 8px 20px rgba(37,211,102,.32)}
.btn-wa:hover{filter:brightness(1.05)}
.btn-wa:focus-visible{outline:2px solid var(--tinta); outline-offset:3px}
.btn-wa .wa-ic{font-size:17px; line-height:1}
@media (max-width:620px){
  /* En celular ocupa el ancho: es la unica accion de la pagina. */
  .btn-wa{width:100%; justify-content:center}
}

/* ── Tablas: en celular se van de lado, no se cortan ──────────────── */
.tabla-caja{overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--linea); border-radius:var(--radio);
  background:var(--panel); box-shadow:var(--sombra); margin:0 0 16px}
table{border-collapse:collapse; width:100%; min-width:460px; font-size:14.5px}
th,td{padding:10px 13px; text-align:left; border-bottom:1px solid var(--linea);
  vertical-align:top}
thead th{background:var(--acento-cl); color:var(--tinta);
  font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap; border-bottom:1px solid var(--linea2)}
tbody tr:last-child td{border-bottom:0}
td b{font-weight:700}
.num{white-space:nowrap}

/* ── El ejemplo: lo que de verdad enseña qué pide la tarea ────────── */
.ej{border-left:4px solid var(--acento); background:var(--acento-cl);
  border-radius:0 10px 10px 0; padding:12px 14px; margin:10px 0 16px}
.ej .et{font-size:11px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--acento); margin:0 0 6px}
.ej p{margin:0 0 7px; font-size:15px}
.ej p:last-child{margin-bottom:0}
.ej .en{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:14px; line-height:1.6; background:#fff; border:1px solid var(--linea);
  border-radius:8px; padding:10px 12px; white-space:pre-wrap; margin:0 0 8px}
.ej ol,.ej ul{margin:0 0 8px; padding-left:20px; font-size:15px}
.ej .resp{font-size:13.5px; color:var(--tinta2)}
.ej .resp b{color:var(--tinta)}

/* ── Tarea: título + duración ─────────────────────────────────────── */
.tarea{border:1px solid var(--linea); border-radius:var(--radio);
  background:var(--panel); padding:16px 17px; margin:0 0 14px;
  box-shadow:var(--sombra)}
.tarea > h3{margin-top:0}
.tarea .meta{font-size:12.5px; color:var(--tinta2); font-weight:600;
  margin:-4px 0 10px}

/* ── Avisos ──────────────────────────────────────────────────────── */
.aviso{border:1px solid #e6cf9a; background:#fdf6e4; border-radius:var(--radio);
  padding:14px 16px; margin:0 0 16px; font-size:15px}
.aviso b{color:#7a5a12}
.aviso.frio{border-color:var(--linea2); background:#eef1f3}
.aviso.frio b{color:var(--tinta)}

/* ── Listas ───────────────────────────────────────────────────────── */
ul.limpia{list-style:none; padding:0; margin:0 0 14px}
ul.limpia li{padding:7px 0 7px 26px; position:relative;
  border-bottom:1px solid var(--linea)}
ul.limpia li:last-child{border-bottom:0}
ul.limpia li:before{content:"→"; position:absolute; left:0; top:7px;
  color:var(--acento); font-weight:800}
ul.limpia b{font-weight:700}

/* ── Enlaces oficiales ────────────────────────────────────────────── */
.enlaces{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.enlaces a{display:block; background:var(--panel); border:1px solid var(--linea);
  border-radius:12px; padding:13px 15px; text-decoration:none; color:var(--tinta);
  box-shadow:var(--sombra)}
.enlaces a:hover{border-color:var(--acento)}
.enlaces a b{display:block; font-size:15px; color:var(--acento)}
.enlaces a span{display:block; font-size:13px; color:var(--tinta2); margin-top:2px}
.enlaces a em{display:block; font-size:11.5px; color:var(--tinta3);
  font-style:normal; margin-top:4px; word-break:break-all}

/* ── Fuentes consultadas (desplegable, sólo profe) ────────────── */
/* Es un <details hidden>. El hidden lo quita el script del envoltorio en
   el navegador del profe; para el estudiante no existe. El display:none
   va explícito porque un <details> es display:block por hoja del
   navegador y no quiero depender de qué regla gana. */
.fuentes[hidden]{display:none !important}
.fuentes{margin:40px 0 0; padding:16px 18px; background:#eceae4;
  border:1px solid var(--linea); border-radius:var(--radio);
  font-size:13px; color:var(--tinta2)}
.fuentes>summary{margin:0; font-size:15px; font-weight:700;
  color:var(--tinta); cursor:pointer}
.fuentes[open]>summary{margin-bottom:8px}
.fuentes>summary:focus-visible{outline:2px solid var(--tinta2);
  outline-offset:3px}
.fuentes p{margin:0 0 8px}
.fuentes ol{margin:0; padding-left:20px}
.fuentes li{margin:0 0 5px; word-break:break-word}
.fuentes a{color:var(--tinta2)}

/* ── Pie ──────────────────────────────────────────────────────────── */
.pie{background:var(--tinta); color:#c3ccd4; margin-top:46px}
.pie-in{max-width:var(--ancho); margin:0 auto; padding:26px 18px 32px;
  font-size:14px}
.pie a{color:#fff; font-weight:600}
.pie .fino{font-size:12.5px; color:#8b99a5; margin-top:12px}

/* ── Celular ──────────────────────────────────────────────────────── */
@media (max-width:620px){
  body{font-size:15.5px}
  .caja{padding:0 14px 44px}
  .cab-in{padding:12px 14px}
  .cab .volver{margin-left:0; width:100%; text-align:center}
  .nav-in{padding:0 14px}
  .hero{padding:24px 0 6px}
  .panel,.tarea{padding:15px 14px}
  th,td{padding:9px 11px}
}