/* =========================================================================
   TechEmprende SR Conecta 2026 — sitio oficial del concurso
   Registro visual: documento institucional impreso. Papel crema, tipografía
   con serifas en los titulares, filetes finos y color aplicado con mesura.
   ========================================================================= */

:root {
  --crema: #faf7f2;
  --crema-2: #f2ede4;
  --papel: #ffffff;

  --tinta: #1c2b36;
  --tinta-sua: #5c6b74;
  --tinta-tenue: #8a9299;

  --navy: #123a5c;
  --navy-osc: #0d2a43;
  --verde: #2f6b4f;
  --rojo: #b23a2e;
  --oro: #a8802f;

  --linea: #ddd6c9;
  --linea-fuerte: #c3b9a6;

  --oro-cla: #d9c9a3;

  /* Palatino/Iowan dan un color de página más cálido que Georgia en titulares;
     Georgia queda de reserva porque está en cualquier equipo. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --serif-texto: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radio: 6px;
  --radio-sm: 4px;
  --sombra: 0 1px 2px rgba(28, 43, 54, .06);
  --ancho: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  color: var(--tinta);
  counter-reset: seccion;

  /* Grano de papel muy tenue, para que el crema no se lea como plano digital. */
  background-color: var(--crema);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E");
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { font-family: var(--serif); margin: 0 0 .5em; line-height: 1.18; font-weight: 700; }
h1 { font-size: clamp(2.15rem, 4.8vw, 3.35rem); letter-spacing: -.018em; }
h2 { font-size: clamp(1.62rem, 3.1vw, 2.3rem); letter-spacing: -.012em; }
h3 { font-size: 1.16rem; }
p { margin: 0 0 1em; }
a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--rojo); }
img, svg { max-width: 100%; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.oculto { display: none !important; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

/* --------------------------------------------------------------- cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 500;
  background: var(--crema);
  border-bottom: 1px solid var(--linea);
}
/* Filete tricolor: marca institucional discreta. */
.cabecera::after {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--navy) 0 33.33%, var(--rojo) 33.33% 66.66%, var(--verde) 66.66% 100%);
}
.cabecera__fila {
  display: flex; align-items: center; gap: 24px;
  height: 78px; max-width: var(--ancho); margin: 0 auto; padding: 0 24px;
}
.marca { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--tinta); }
.marca__icono { width: 46px; height: 46px; flex: none; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.18; }
.marca__titulo { font-family: var(--serif); font-weight: 700; font-size: 1.14rem; color: var(--navy); }
.marca__sub { font-size: .68rem; color: var(--tinta-sua); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; }

.menu { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.menu a {
  padding: 9px 13px; color: var(--tinta-sua); text-decoration: none;
  font-size: .93rem; font-weight: 600; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--navy); border-bottom-color: var(--navy); }

.menu-movil {
  display: none; margin-left: auto;
  width: 46px; height: 46px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-sm);
  background: var(--papel); color: var(--tinta); font-size: 1.2rem; cursor: pointer;
}

/* --------------------------------------------------------------- botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 13px 26px;
  border: 1px solid transparent; border-radius: var(--radio-sm);
  font: inherit; font-weight: 700; font-size: .98rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.boton:disabled { opacity: .5; cursor: not-allowed; }

.boton--primario { background: var(--rojo); color: #fff; }
.boton--primario:hover:not(:disabled) { background: #932d23; color: #fff; }
.boton--verde { background: var(--verde); color: #fff; }
.boton--verde:hover:not(:disabled) { background: #235340; color: #fff; }
.boton--azul { background: var(--navy); color: #fff; }
.boton--azul:hover:not(:disabled) { background: var(--navy-osc); color: #fff; }
.boton--linea { background: transparent; color: var(--navy); border-color: var(--linea-fuerte); }
.boton--linea:hover:not(:disabled) { border-color: var(--navy); background: var(--crema-2); }
.boton--claro { background: var(--papel); color: var(--navy); border-color: var(--linea-fuerte); }
.boton--claro:hover:not(:disabled) { border-color: var(--navy); background: var(--crema-2); }
.boton--chico { min-height: 40px; padding: 8px 16px; font-size: .88rem; }
.boton--bloque { width: 100%; }

/* ------------------------------------------------------------------ hero */
.hero { border-bottom: 1px solid var(--linea); background: var(--papel); }
.hero__contenido {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center;
  max-width: var(--ancho); margin: 0 auto; padding: 62px 24px 66px;
}

.hero__etiqueta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 14px; margin-bottom: 22px;
  border: 1px solid var(--linea-fuerte); border-radius: 3px;
  background: var(--crema);
  font-size: .78rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--tinta-sua);
}
.hero__etiqueta i { width: 7px; height: 7px; background: var(--verde); border-radius: 50%; }

.hero h1 { margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--navy); }
.hero__bajada { font-size: 1.12rem; color: var(--tinta-sua); max-width: 54ch; margin-bottom: 28px; }
.hero__bajada strong { color: var(--tinta); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

.hero__ilustracion { text-align: center; }
.hero__ilustracion img {
  width: 100%; max-width: 420px; height: auto;
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--crema);
}
.hero__pie-ilustracion {
  margin-top: 10px; font-size: .8rem; color: var(--tinta-tenue); font-style: italic;
}

/* Ficha de datos, al estilo de una caja de resumen impresa. */
.hero__datos {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--linea); border-radius: var(--radio) var(--radio) 0 0;
  overflow: hidden; border-bottom: 0;
}
.dato { padding: 15px 16px; border-right: 1px solid var(--linea); background: var(--crema); }
.dato:last-child { border-right: 0; }
.dato__valor {
  font-family: var(--serif); font-size: clamp(1.15rem, 1.8vw, 1.55rem); font-weight: 700;
  line-height: 1.15; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Franja de cierre: mantiene la cuenta atrás fuera de la retícula de datos. */
.hero__cierre {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 16px;
  border: 1px solid var(--linea); border-radius: 0 0 var(--radio) var(--radio);
  background: var(--papel);
}
.hero__cierre .dato__etiqueta { margin: 0; }
.dato__etiqueta {
  font-size: .68rem; color: var(--tinta-sua); text-transform: uppercase;
  letter-spacing: 1px; font-weight: 700; margin-top: 3px;
}

.regresiva { display: flex; gap: 6px; flex-wrap: wrap; }
.regresiva__caja { min-width: 52px; padding: 5px 8px; text-align: center; border: 1px solid var(--linea); background: var(--papel); border-radius: 3px; }
.regresiva__numero { font-family: var(--serif); font-size: 1.18rem; font-weight: 700; line-height: 1.1; color: var(--rojo); font-variant-numeric: tabular-nums; }
.regresiva__texto { font-size: .6rem; text-transform: uppercase; letter-spacing: .6px; color: var(--tinta-sua); font-weight: 700; }

/* -------------------------------------------------------------- secciones */
.seccion { padding: 76px 0; border-bottom: 1px solid var(--linea); counter-increment: seccion; }
.seccion--gris { background: var(--crema-2); }
.seccion--azul { background: var(--navy); color: #e8eef3; border-bottom-color: var(--navy-osc); }
.seccion--azul h2, .seccion--azul h3 { color: #fff; }
.seccion--azul .seccion__intro { color: #b9cddc; }
.seccion--azul .seccion__gorro { color: #9fc4dd; border-color: rgba(255, 255, 255, .3); }
.seccion--azul .tarjeta { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .18); }
.seccion--azul .tarjeta h3 { color: #fff; }
.seccion--azul .tarjeta p { color: #b9cddc; }

.seccion__cabecera { max-width: 64ch; margin-bottom: 42px; }
.seccion__cabecera--centrada { text-align: center; margin-left: auto; margin-right: auto; }
.seccion__cabecera--centrada .seccion__gorro { justify-content: center; }
.seccion__cabecera--centrada .seccion__gorro::after { display: none; }

/* Antetítulo numerado, como los epígrafes de un documento impreso. */
.seccion__gorro {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
  font-family: var(--sans); font-size: .73rem; font-weight: 800;
  letter-spacing: 1.7px; text-transform: uppercase; color: var(--verde);
}
.seccion__gorro::before {
  content: counter(seccion, decimal-leading-zero);
  font-family: var(--serif); font-size: 1.15rem; font-weight: 700;
  letter-spacing: 0; color: var(--oro);
}
.seccion__gorro::after {
  content: ""; flex: 1; max-width: 90px; height: 1px; background: var(--oro-cla);
}
.seccion--azul .seccion__gorro::before { color: var(--oro-cla); }
.seccion--azul .seccion__gorro::after { background: rgba(255, 255, 255, .28); }

.seccion__intro { color: var(--tinta-sua); font-size: 1.06rem; margin: 0; }
.seccion__intro strong { color: var(--tinta); }

/* Párrafo de entrada con capitular, en cuerpo con serifas. */
.entradilla {
  font-family: var(--serif-texto); font-size: 1.12rem; line-height: 1.7;
  color: var(--tinta); max-width: 64ch;
}
.entradilla::first-letter {
  float: left; font-family: var(--serif); font-size: 3.5em; line-height: .82;
  padding: .06em .1em 0 0; color: var(--navy); font-weight: 700;
}

/* Banda ilustrada que separa bloques del documento. */
.banda-paisaje {
  height: 190px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  background: url("/img/paisaje.svg") center bottom / cover no-repeat, var(--crema-2);
}

/* Filete ornamental con rombo al centro. */
.ornamento {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 auto 38px; max-width: 260px; color: var(--oro);
}
.ornamento::before, .ornamento::after { content: ""; flex: 1; height: 1px; background: var(--oro-cla); }
.ornamento i { width: 7px; height: 7px; background: var(--oro); transform: rotate(45deg); }

.rejilla { display: grid; gap: 20px; }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(298px, 1fr)); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.tarjeta {
  padding: 26px;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.tarjeta__icono {
  width: 46px; height: 46px; margin-bottom: 16px;
  display: grid; place-items: center;
  border: 1px solid var(--linea); border-radius: var(--radio-sm); background: var(--crema);
  color: var(--verde);
}
.tarjeta__icono svg { width: 24px; height: 24px; }
.tarjeta h3 { margin-bottom: 7px; }
.tarjeta p { margin: 0; color: var(--tinta-sua); font-size: .96rem; }

/* Entregables */
.lista-verificacion { list-style: none; margin: 0; padding: 0; }
.lista-verificacion li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.lista-verificacion li:last-child { border-bottom: 0; }
.lista-verificacion__marca {
  width: 28px; height: 28px; flex: none; margin-top: 2px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: var(--serif); font-size: .86rem; font-weight: 700;
}
.lista-verificacion strong { display: block; }
.lista-verificacion span { color: var(--tinta-sua); font-size: .95rem; }

/* Criterios */
.criterio { display: grid; grid-template-columns: 84px 1fr; gap: 22px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--linea); }
.criterio:last-child { border-bottom: 0; }
.criterio__puntos { padding: 11px 6px; text-align: center; border: 1px solid var(--linea); border-radius: var(--radio-sm); background: var(--crema); }
.criterio__puntos b { display: block; font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--navy); }
.criterio__puntos span { font-size: .62rem; text-transform: uppercase; letter-spacing: .8px; color: var(--tinta-sua); font-weight: 700; }
.criterio h3 { margin-bottom: 4px; }
.criterio p { margin: 0; color: var(--tinta-sua); font-size: .96rem; }
.criterio__barra { height: 5px; margin-top: 10px; background: var(--crema-2); border-radius: 2px; overflow: hidden; }
.criterio__barra i { display: block; height: 100%; background: var(--verde); }

/* Premios */
.premio {
  position: relative; padding: 30px 26px; text-align: center;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.premio--destacado { border: 2px solid var(--oro); background: linear-gradient(180deg, #fdfaf3, var(--papel) 120px); }
/* Filete interior: detalle de diploma. */
.premio::after {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid var(--linea); border-radius: 3px;
}
.premio--destacado::after { border-color: var(--oro-cla); }
.premio > * { position: relative; z-index: 1; }
.premio__cinta {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 4px 15px; border-radius: 3px;
  background: var(--oro); color: #fff;
  font-size: .69rem; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; white-space: nowrap;
}
.premio__medalla { display: grid; place-items: center; }
.premio__medalla svg { width: 46px; height: 46px; }
.premio__lugar { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.1px; color: var(--tinta-sua); margin-top: 10px; }
.premio__monto { font-family: var(--serif); font-size: 2.2rem; font-weight: 700; line-height: 1.1; margin: 4px 0 16px; color: var(--navy); }
.premio--destacado .premio__monto { color: var(--oro); }
.premio ul { list-style: none; margin: 0; padding: 0; text-align: left; }
.premio li { padding: 6px 0 6px 24px; position: relative; font-size: .93rem; color: var(--tinta-sua); }
.premio li::before { content: "—"; position: absolute; left: 0; color: var(--verde); font-weight: 700; }

/* Cronograma */
.cronograma { list-style: none; margin: 0; padding: 0 0 0 30px; position: relative; }
.cronograma::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 1px; background: rgba(255, 255, 255, .28); }
.cronograma li { position: relative; padding-bottom: 24px; }
.cronograma li::before {
  content: ""; position: absolute; left: -26px; top: 8px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--navy); border: 2px solid rgba(255, 255, 255, .5);
}
.cronograma li.cumplido::before { background: #7fbfa0; border-color: #7fbfa0; }
.cronograma li.activo::before { background: #e8b04b; border-color: #e8b04b; }
.cronograma__fase { font-weight: 700; color: #fff; }
.cronograma__fecha { color: #b9cddc; font-size: .94rem; }

/* Tablas */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
table { width: 100%; border-collapse: collapse; font-size: .96rem; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
th {
  background: var(--crema); font-size: .7rem; text-transform: uppercase;
  letter-spacing: 1.1px; color: var(--tinta-sua); font-weight: 800; white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td { color: var(--tinta-sua); }
td strong { color: var(--navy); font-family: var(--serif); }

/* Bases */
.bloque-bases { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.bloque-bases ul { margin: 0; padding-left: 20px; }
.bloque-bases li { margin-bottom: 10px; color: var(--tinta-sua); }
.bloque-bases li::marker { color: var(--verde); }
.bloque-bases strong { color: var(--tinta); }

/* Preguntas frecuentes */
details { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-sm); margin-bottom: 9px; overflow: hidden; }
summary { padding: 15px 18px; cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 1.35rem; color: var(--verde); font-weight: 400; line-height: 1; }
details[open] summary::after { content: "−"; }
details > p { padding: 0 18px 16px; margin: 0; color: var(--tinta-sua); }

/* -------------------------------------------------------------- formulario */
.formulario { max-width: 820px; margin: 0 auto; }
.paso { padding: 28px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: 18px; box-shadow: var(--sombra); }
.paso__titulo { display: flex; align-items: center; gap: 13px; margin-bottom: 6px; }
.paso__numero {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--navy); color: #fff; font-family: var(--serif); font-weight: 700; font-size: .95rem;
}
.paso__titulo h3 { margin: 0; }
.paso__ayuda { color: var(--tinta-sua); font-size: .95rem; margin: 0 0 20px 47px; }

.campo { margin-bottom: 17px; }
.campo > label { display: block; margin-bottom: 6px; font-weight: 700; font-size: .94rem; }
.campo__ayuda { display: block; font-weight: 400; color: var(--tinta-sua); font-size: .85rem; margin-top: 3px; }
.requerido { color: var(--rojo); }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="password"], select, textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-sm);
  font: inherit; font-size: 1rem; color: var(--tinta); background: var(--papel);
  min-height: 50px;
}
input::placeholder, textarea::placeholder { color: var(--tinta-tenue); }
textarea { min-height: 128px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--navy); outline: none; box-shadow: 0 0 0 3px rgba(18, 58, 92, .12);
}
input:user-invalid, textarea:user-invalid { border-color: var(--rojo); }

.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.opciones-tarjeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); gap: 12px; }
.opcion-tarjeta {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px; cursor: pointer;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-sm); background: var(--papel);
}
.opcion-tarjeta:hover { border-color: var(--navy); }
.opcion-tarjeta:has(input:checked) { border-color: var(--verde); background: #f2f7f4; box-shadow: inset 3px 0 0 var(--verde); }
.opcion-tarjeta input { width: 20px; height: 20px; flex: none; margin: 3px 0 0; accent-color: #2f6b4f; min-height: auto; }
.opcion-tarjeta strong { display: block; font-size: .96rem; }
.opcion-tarjeta span { font-size: .87rem; color: var(--tinta-sua); }

.integrante { padding: 20px; margin-bottom: 15px; border: 1px solid var(--linea); border-left: 3px solid var(--verde); border-radius: var(--radio-sm); background: var(--crema); }
.integrante__cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.integrante__titulo { font-family: var(--serif); font-weight: 700; color: var(--navy); flex: 1; }
.integrante__quitar {
  border: 1px solid var(--linea-fuerte); background: var(--papel); color: var(--rojo);
  width: 36px; height: 36px; border-radius: var(--radio-sm); cursor: pointer; font-size: 1rem;
}
.integrante__quitar:hover { border-color: var(--rojo); background: #fbf1f0; }

.casilla {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin-bottom: 12px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-sm); background: var(--papel); cursor: pointer;
}
.casilla:has(input:checked) { border-color: var(--verde); background: #f2f7f4; }
.casilla input { width: 20px; height: 20px; flex: none; margin: 3px 0 0; accent-color: #2f6b4f; min-height: auto; }
.casilla span { font-size: .94rem; color: var(--tinta-sua); }

.aviso-formulario { display: flex; gap: 12px; align-items: flex-start; padding: 15px 17px; margin-bottom: 18px; border-radius: var(--radio-sm); font-size: .94rem; }
.aviso-formulario--error { background: #fbf1f0; color: #7d2119; border: 1px solid #e6c0bb; }
.aviso-formulario--info { background: #fdf7ea; color: #7a5a14; border: 1px solid #e8d6a8; }

/* Confirmación */
.confirmacion { text-align: center; padding: 46px 28px; }
.confirmacion__icono { display: grid; place-items: center; }
.confirmacion__icono img { width: 132px; height: 132px; }
.confirmacion__codigo {
  display: inline-block; margin: 16px 0 18px; padding: 15px 34px;
  background: var(--crema); border: 1px dashed var(--verde); border-radius: var(--radio);
  font-family: var(--serif); font-size: 1.95rem; font-weight: 700; letter-spacing: 2px; color: var(--verde);
}

/* ---------------------------------------------------------------- avisos */
#avisos { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: flex; flex-direction: column; gap: 10px; max-width: 390px; }
.aviso {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 14px 17px; border-radius: var(--radio-sm);
  background: var(--tinta); color: #fff; box-shadow: 0 6px 20px rgba(28, 43, 54, .25);
  font-size: .94rem;
}
.aviso--ok { background: var(--verde); }
.aviso--error { background: var(--rojo); }

/* Distintivo de integrante vinculado al territorio (panel interno). */
.marca-sr {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  background: var(--verde); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .6px; vertical-align: 1px;
}

/* ------------------------------------------------------------------- pie */
.pie { background: var(--navy-osc); color: #a7bfd0; padding: 50px 0 30px; font-size: .93rem; }
.pie__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 30px; margin-bottom: 30px; }
.pie h4 { font-family: var(--sans); color: #fff; font-size: .72rem; text-transform: uppercase; letter-spacing: 1.3px; margin-bottom: 13px; }
.pie a { color: #cfe0ec; }
.pie a:hover { color: #fff; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 8px; }
.pie__legal { padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .84rem; color: #7f9bb0; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 940px) {
  /* En pantallas estrechas manda el titular; la ilustración queda debajo. */
  .hero__contenido { grid-template-columns: 1fr; gap: 34px; padding: 44px 24px 50px; }
  .hero__ilustracion img { max-width: 340px; }
}

@media (max-width: 900px) {
  .menu { display: none; }
  .menu-movil { display: block; }
  .menu.abierto {
    display: flex; flex-direction: column; gap: 0; align-items: stretch;
    position: absolute; top: 81px; left: 0; right: 0;
    padding: 8px; background: var(--crema);
    border-bottom: 1px solid var(--linea); box-shadow: 0 8px 20px rgba(28, 43, 54, .1);
  }
  .menu.abierto a { padding: 14px 16px; font-size: 1rem; border-bottom: 1px solid var(--linea); }
  .menu.abierto a:last-child { border-bottom: 0; }
  .fila { grid-template-columns: 1fr; }
  .criterio { grid-template-columns: 72px 1fr; gap: 16px; }
  .seccion { padding: 48px 0; }
  .paso { padding: 20px; }
  .paso__ayuda { margin-left: 0; }
  .hero__datos { grid-template-columns: 1fr; }
  .dato { border-right: 0; border-bottom: 1px solid var(--linea); }
  .dato:last-child { border-bottom: 0; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .hero__acciones .boton { width: 100%; }
  .confirmacion__codigo { font-size: 1.45rem; letter-spacing: 1px; padding: 13px 18px; }
  .envoltura { padding: 0 16px; }
}

/* ------------------------------------------------------------------ print */
@media print {
  .cabecera, .hero__acciones, #avisos, .menu-movil, #formularioInscripcion,
  .banda-paisaje, .ornamento { display: none !important; }
  body { background: #fff; background-image: none; font-size: 11.5pt; }
  .seccion { padding: 16px 0; page-break-inside: avoid; }
  .tarjeta, .paso, .premio { box-shadow: none; }
  .seccion--azul { background: #fff; color: #000; }
  .seccion--azul h2, .seccion--azul h3, .cronograma__fase { color: #000; }
  .seccion--azul .seccion__intro, .cronograma__fecha { color: #444; }

  /* Constancia de inscripción: solo el comprobante. */
  body.constancia .hero,
  body.constancia .pie,
  body.constancia .seccion:not(#inscripcion),
  body.constancia #inscripcion .seccion__cabecera { display: none !important; }
  body.constancia .confirmacion { border: 2px solid var(--navy); }
}