/* ============================================================================
   Grupo Retia — hoja de estilos
   Generada a partir del export del canvas de diseño. Los 214 atributos `style`
   inline del original se han deduplicado en 108 clases (.u1 … .u108), porque
   un estilo inline gana siempre en especificidad y hacía imposible escribir
   media queries sin sembrar el archivo de !important.
   Orden: 1 base · 2 generado · 3 correcciones · 4 estados · 5 componentes · 6 responsive
   ========================================================================= */

/* ============================================================================
   1. BASE
   ========================================================================= */
:root {
  --amarillo: #FFD200;
  --verde:    #14211a;
  --tinta:    #1c1d1f;
  --gris:     #62646a;
  --borde:    #dadbdd;
}

html, body { margin: 0; padding: 0; background: #ffffff; }
body {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--tinta);
}
* { box-sizing: border-box; }
a { color: var(--amarillo); text-decoration: none; }
a:hover { color: var(--verde); }

@keyframes retia-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.72); } }
@keyframes retia-sweep { from { background-position: 0 0; } to { background-position: 56px 0; } }


/* ============================================================================
   2. CLASES GENERADAS (estilos inline deduplicados del export)
   ========================================================================= */
.u1{max-width:100%;overflow-x:hidden;color:rgb(28, 29, 31)}
.u2{position:sticky;top:0px;z-index:50;background:rgba(255, 255, 255, 0.92);backdrop-filter:blur(10px);border-bottom:1px solid rgb(218, 219, 221)}
.u3{max-width:1200px;margin:0px auto;padding:0px 32px;height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.u4{display:flex;align-items:baseline;gap:2px;color:rgb(28, 29, 31);font-size:26px;font-weight:700;letter-spacing:-0.03em}
.u5{width:9px;height:9px;border-radius:9999px;background:rgb(255, 210, 0);display:inline-block;animation:2.6s ease-in-out 0s infinite normal none running retia-pulse}
.u6{display:flex;align-items:center;gap:28px}
.u7{color:rgb(98, 100, 106);font-size:17px;font-weight:500}
.u8{background:rgb(28, 29, 31);color:rgb(255, 255, 255);font-size:17px;font-weight:700;padding:14px 22px;border-radius:8px}
.u9{display:flex;align-items:center;gap:2px;border:1px solid rgb(218, 219, 221);border-radius:9999px;padding:3px}
.u10{font-family:inherit;font-size:14px;font-weight:700;letter-spacing:0.04em;padding:8px 13px;border:none;border-radius:9999px;cursor:pointer;background:rgb(28, 29, 31);color:rgb(255, 255, 255)}
.u11{font-family:inherit;font-size:14px;font-weight:700;letter-spacing:0.04em;padding:8px 13px;border:none;border-radius:9999px;cursor:pointer;background:transparent;color:rgb(98, 100, 106)}
.u12{background:rgb(20, 33, 26);color:rgb(255, 255, 255);position:relative;overflow:hidden}
.u13{max-width:1200px;margin:0px auto;padding:96px 32px 0px;display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center}
.u14{margin:0px;font-size:78px;line-height:0.98;letter-spacing:-0.045em;font-weight:700;text-wrap:balance;width:576px;height:253px;color:rgb(255, 255, 255)}
.u15{letter-spacing:-0.045em;text-wrap-mode:initial;font-weight:normal}
.u16{letter-spacing:-0.045em;text-wrap-mode:initial;color:rgb(250, 210, 2)}
.u17{letter-spacing:-0.045em;text-wrap-mode:initial;font-weight:400}
.u18{margin:32px 0px 0px;font-size:24px;line-height:1.45;color:rgb(201, 210, 204);max-width:620px;font-weight:300;text-wrap:pretty;width:549px;height:103px}
.u19{display:flex;flex-wrap:wrap;gap:16px;margin-top:44px}
.u20{background:rgb(255, 255, 255);color:rgb(20, 33, 26);font-size:19px;font-weight:700;padding:20px 32px;border-radius:8px}
.u21{border:1.5px solid rgba(255, 255, 255, 0.45);color:rgb(255, 255, 255);font-size:19px;font-weight:500;padding:20px 32px;border-radius:8px}
.u22{position:relative;padding-bottom:0px}
.u23{height:520px;border-radius:16px;overflow:hidden;border:1px solid rgba(255, 255, 255, 0.16)}
.u24{width:100%;height:100%;object-fit:cover;display:block}
.u25{position:absolute;left:-56px;bottom:64px;width:220px;height:165px;border-radius:16px;overflow:hidden;border:1px solid rgba(255, 255, 255, 0.2)}
.u26{border-top:1px solid rgba(255, 255, 255, 0.14);margin-top:72px}
.u27{max-width:1200px;margin:0px auto;padding:0px 32px;display:grid;grid-template-columns:repeat(3, 1fr)}
.u28{padding:36px 0px}
.u29{font-size:40px;font-weight:700;letter-spacing:-0.03em}
.u30{font-size:17px;color:rgb(159, 176, 165);margin-top:6px}
.u31{padding:36px 0px 36px 40px;border-left:1px solid rgba(255, 255, 255, 0.14)}
.u32{max-width:1200px;margin:0px auto;padding:120px 32px}
.u33{display:grid;grid-template-columns:0.85fr 1.15fr;gap:64px;align-items:start}
.u34{margin:0px;font-size:60px;line-height:1.06;letter-spacing:-0.04em;font-weight:300}
.u35{font-weight:700}
.u36{margin-top:36px;width:416px;border-radius:16px;overflow:hidden;border:1px solid rgb(218, 219, 221);line-height:0}
.u37{width:416px;height:285px;object-fit:cover;object-position:center 42%;display:block}
.u38{padding-top:6px}
.u39{margin:0px;font-size:26px;line-height:1.45;font-weight:300;color:rgb(28, 29, 31);text-wrap:pretty}
.u40{margin:28px 0px 0px;font-size:26px;line-height:1.45;font-weight:300;color:rgb(28, 29, 31);text-wrap:pretty}
.u41{background:rgb(246, 247, 246);border-top:1px solid rgb(230, 232, 230);border-bottom:1px solid rgb(230, 232, 230)}
.u42{display:flex;flex-direction:column;gap:24px;margin-bottom:56px}
.u43{margin:0px;font-size:60px;line-height:1.02;letter-spacing:-0.04em;font-weight:300}
.u44{margin:0px;font-size:26px;line-height:1.45;font-weight:300;color:rgb(28, 29, 31);max-width:900px;text-wrap:pretty}
.u45{display:grid;grid-template-columns:repeat(3, 1fr);gap:24px}
.u46{background:rgb(20, 33, 26);color:rgb(255, 255, 255);border-radius:16px;padding:32px;min-height:280px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:rgba(0, 0, 0, 0.13) 0px 3px 10px 0px}
.u47{font-size:26px;font-weight:700;line-height:1.15;letter-spacing:-0.02em}
.u48{font-size:17px;color:rgb(159, 176, 165);margin-top:12px}
.u49{background:rgb(255, 255, 255);border:1px solid rgb(218, 219, 221);border-radius:16px;padding:32px;min-height:280px;display:flex;flex-direction:column;justify-content:space-between}
.u50{font-size:17px;color:rgb(98, 100, 106);margin-top:12px}
.u51{background:rgb(28, 29, 31);color:rgb(255, 255, 255)}
.u52{display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:center}
.u53{font-size:15px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:rgb(255, 210, 0);margin-bottom:20px}
.u54{margin:0px;font-size:56px;line-height:1.05;letter-spacing:-0.04em;font-weight:300;text-wrap:balance}
.u55{margin:32px 0px 0px;font-size:21px;line-height:1.55;color:rgb(185, 188, 185);text-wrap:pretty}
.u56{display:inline-block;margin-top:40px;background:rgb(255, 255, 255);color:rgb(28, 29, 31);font-size:19px;font-weight:700;padding:20px 32px;border-radius:8px}
.u57{height:460px;border-radius:16px;overflow:hidden;border:1px solid rgba(255, 255, 255, 0.18)}
.u58{margin-top:80px;font-size:28px;font-weight:300;letter-spacing:-0.02em}
.u59{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.u60{border:1px solid rgba(255, 255, 255, 0.2);border-radius:16px;padding:36px}
.u61{font-size:30px;font-weight:700;letter-spacing:-0.02em;margin:24px 0px 12px}
.u62{font-size:19px;line-height:1.6;color:rgb(185, 188, 185)}
.u63{margin:28px 0px 0px;font-size:24px;line-height:1.45;color:rgb(98, 100, 106);width:100%;max-width:100%;font-weight:300;text-wrap:pretty}
.u64{display:grid;grid-template-columns:repeat(4, 1fr);gap:24px;margin-top:64px}
.u65{border-top:2px solid rgb(255, 210, 0);padding-top:24px}
.u66{font-size:26px;font-weight:700;letter-spacing:-0.02em;margin:20px 0px 10px}
.u67{font-size:18px;line-height:1.55;color:rgb(98, 100, 106)}
.u68{background:rgb(20, 33, 26);color:rgb(255, 255, 255)}
.u69{margin:0px 0px 16px;font-size:56px;line-height:1.05;letter-spacing:-0.04em;font-weight:300;white-space:nowrap}
.u70{height:6px;border-radius:9999px;margin:48px 0px 40px;background-image:repeating-linear-gradient(90deg, rgb(255, 210, 0) 0px, rgb(255, 210, 0) 22px, rgba(255, 255, 255, 0.12) 22px, rgba(255, 255, 255, 0.12) 56px);animation:2.4s linear 0s infinite normal none running retia-sweep}
.u71{display:grid;grid-template-columns:repeat(4, 1fr);gap:24px}
.u72{background:rgba(255, 255, 255, 0.05);border:1px solid rgba(255, 255, 255, 0.14);border-radius:16px;padding:32px;min-height:300px;display:flex;flex-direction:column}
.u73{display:flex;align-items:center;justify-content:space-between}
.u74{font-size:19px;font-weight:700;color:rgb(255, 210, 0)}
.u75{font-size:26px;font-weight:700;letter-spacing:-0.02em;margin:28px 0px 12px}
.u76{font-size:18px;line-height:1.55;color:rgb(159, 176, 165)}
.u77{background:rgb(255, 210, 0);border:1px solid rgb(255, 210, 0);border-radius:16px;padding:32px;min-height:300px;display:flex;flex-direction:column;color:rgb(13, 26, 18)}
.u78{font-size:19px;font-weight:700}
.u79{font-size:18px;line-height:1.55;color:rgba(13, 26, 18, 0.78)}
.u80{margin:28px 0px 56px;font-size:26px;line-height:1.45;font-weight:300;color:rgb(28, 29, 31);max-width:900px;text-wrap:pretty}
.u81{border-top:1px solid rgb(218, 219, 221)}
.u82{border-bottom:1px solid rgb(218, 219, 221)}
.u83{width:100%;background:none;border:none;padding:30px 0px;display:flex;align-items:center;justify-content:space-between;gap:32px;cursor:pointer;text-align:left;font-family:inherit}
.u84{font-size:26px;font-weight:700;letter-spacing:-0.02em;color:rgb(28, 29, 31)}
.u85{flex:0 0 auto;width:44px;height:44px;border-radius:9999px;background:rgb(255, 210, 0);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:rgb(20, 33, 26);line-height:1}
.u86{max-height:340px;overflow:hidden;transition:max-height 0.4s}
.u87{padding:0px 0px 30px;font-size:20px;line-height:1.6;color:rgb(98, 100, 106);max-width:900px;text-wrap:pretty}
.u88{max-height:0px;overflow:hidden;transition:max-height 0.4s}
.u89{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.u90{margin:28px 0px 0px;font-size:22px;line-height:1.5;color:rgb(98, 100, 106);text-wrap:pretty}
.u91{display:inline-flex;align-items:center;gap:12px;margin-top:36px;border:1.5px solid rgb(255, 210, 0);background:rgb(255, 210, 0);color:rgb(20, 33, 26);border-radius:9999px;padding:14px 26px;font-size:18px;font-weight:700}
.u92{margin-top:48px;height:260px;border-radius:16px;overflow:hidden;border:1px solid rgb(218, 219, 221)}
.u93{background:rgb(246, 247, 246);border:1px solid rgb(230, 232, 230);border-radius:16px;padding:40px}
.u94{display:flex;flex-direction:column;gap:20px}
.u95{display:flex;flex-direction:column;gap:8px;font-size:16px;font-weight:500;color:rgb(64, 65, 69)}
.u96{font-family:inherit;font-size:18px;padding:16px;border:1px solid rgb(197, 198, 201);border-radius:12px;background:rgb(255, 255, 255)}
.u97{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.u98{font-family:inherit;font-size:18px;padding:16px;border:1px solid rgb(197, 198, 201);border-radius:12px;background:rgb(255, 255, 255);width:100%}
.u99{font-family:inherit;font-size:18px;padding:16px;border:1px solid rgb(197, 198, 201);border-radius:12px;background:rgb(255, 255, 255);resize:vertical}
.u100{font-family:inherit;background:rgb(28, 29, 31);color:rgb(255, 255, 255);font-size:19px;font-weight:700;padding:20px;border:none;border-radius:8px;cursor:pointer}
.u101{font-size:15px;color:rgb(116, 118, 126);line-height:1.5}
.u102{max-width:1200px;margin:0px auto;padding:64px 32px 40px;display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.u103{display:flex;align-items:baseline;gap:2px;font-size:26px;font-weight:700;letter-spacing:-0.03em}
.u104{width:9px;height:9px;border-radius:9999px;background:rgb(255, 210, 0);display:inline-block}
.u105{display:flex;gap:40px;flex-wrap:wrap}
.u106{color:rgb(185, 188, 185);font-size:17px}
.u107{max-width:1200px;margin:0px auto;padding:0px 32px 48px;border-top:1px solid rgba(255, 255, 255, 0.14)}
.u108{padding-top:24px;font-size:15px;color:rgb(116, 118, 126)}
/* ============================================================================
   3. CORRECCIONES AL EXPORT DEL CANVAS
   El editor codifico medidas fijas en px calculadas para un lienzo de 1440.
   Cada regla de aqui anula una de esas medidas. Van despues del bloque
   generado, asi que ganan por orden de cascada (misma especificidad).
   ========================================================================= */

/* El h1 llevaba width:576px + height:253px. Con 4 lineas de texto desbordaba
   su caja y SE SOLAPABA con el parrafo, ya en escritorio. */
.u14 { width: auto; height: auto; font-size: clamp(40px, 5.4vw, 78px); }

/* Mismo problema en el parrafo del hero (width:549px; height:103px). */
.u18 { width: auto; height: auto; max-width: 620px; }

/* h2 de "Nuestra filosofia de asociacion": white-space:nowrap forzaba una
   linea de ~1100px imposible de romper. */
.u69 { white-space: normal; }

/* Imagen de "Junto a los emprendedores": width:416px fijo en el contenedor
   y en la propia imagen. */
.u36 { width: 100%; max-width: 416px; }
.u37 { width: 100%; height: auto; aspect-ratio: 416 / 285; }

/* Linea de copyright del pie: #74767e sobre #1c1d1f da 3,72:1, por debajo del
   minimo 4,5:1 que exige la WCAG AA para texto normal. */
.u108 { color: #9296a0; }

/* Las anclas quedaban tapadas por la nav sticky de 76px al saltar. */
#top, #servicios, #unete, #proceso, #faq, #contacto { scroll-margin-top: 92px; }

/* La nav sticky NO se pegaba: el wrapper de pagina llevaba overflow-x:hidden,
   lo que convierte al div en scrollport y anula el position:sticky del hijo. */
.pagina { max-width: 100%; color: #1c1d1f; }


/* ============================================================================
   4. ESTADOS :hover / :focus
   El export usaba atributos style-hover / style-focus, que no son CSS valido
   y el navegador ignoraba: no habia ni un solo hover ni foco visible.
   ========================================================================= */
.hov-dark:hover        { background: var(--verde); }
.hov-amarillo:hover    { background: var(--amarillo); color: var(--verde); }
.hov-borde:hover       { border-color: #ffffff; }
.hov-lift              { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.hov-lift:hover        { transform: translateY(-6px); }
.hov-lift-sombra       { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease; }
.hov-lift-sombra:hover { transform: translateY(-6px); box-shadow: 0 3px 10px rgba(0,0,0,.13); }
.hov-invert:hover      { background: var(--verde); border-color: var(--verde); color: #ffffff; }
.campo:focus           { border-color: var(--amarillo); }

/* El runtime generaba `outline:none !important` en los campos: dejaba la
   navegacion por teclado sin ningun indicador. Se sustituye por un anillo
   visible solo para foco de teclado. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--amarillo);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .hov-lift, .hov-lift-sombra { transition: none; }
  .hov-lift:hover, .hov-lift-sombra:hover { transform: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}


/* ============================================================================
   5. COMPONENTES NUEVOS
   ========================================================================= */

/* Salto al contenido, para lectores de pantalla y teclado */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--verde); color: #fff; padding: 14px 20px;
  font-weight: 700; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* Menu movil */
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 11px;
  background: none; border: 1px solid #dadbdd; border-radius: 10px; cursor: pointer;
}
.nav-burger-bar {
  display: block; height: 2px; width: 100%; background: #1c1d1f; border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.lang-switch button { cursor: pointer; background: transparent; color: var(--gris); }
.lang-switch button[aria-pressed="true"] { background: var(--tinta); color: #ffffff; }

/* FAQ: el acordeon usa [hidden] en vez de max-height fijo de 340px, que
   cortaba las respuestas largas. */
.faq-btn { cursor: pointer; }
.faq-panel[hidden] { display: none; }

/* Formulario */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.consent {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; line-height: 1.5; color: #62646a;
}
.consent input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--verde); }
.consent a { color: #1c1d1f; text-decoration: underline; }
.consent a:hover { color: var(--verde); }

.form-status { margin: 0; font-size: 16px; line-height: 1.5; }
.form-status[data-state="error"] { color: #b3261e; font-weight: 500; }
.form-status[hidden] { display: none; }

.form-sent {
  background: #f6f7f6; border: 1px solid #dadbdd; border-radius: 16px; padding: 40px;
}
.form-sent[hidden] { display: none; }
.form-sent-title { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; }
.form-sent-text  { font-size: 19px; line-height: 1.5; color: #62646a; }

button[disabled] { opacity: .6; cursor: progress; }

/* Alternativa al formulario en la sección de contacto. La web no ofrecía
   ninguna vía de contacto salvo un formulario que no enviaba nada. */
.contacto-alt {
  margin: 24px 0 0;
  font-size: 19px; line-height: 1.5; color: var(--gris);
}
.contacto-alt a {
  color: var(--tinta); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--amarillo); text-decoration-thickness: 2px;
}
.contacto-alt a:hover { color: var(--verde); }

/* Fila inferior del pie: copyright a la izquierda, legal y contacto a la derecha. */
.pie-inferior {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px 32px; flex-wrap: wrap;
}
.pie-legal { display: flex; gap: 24px; flex-wrap: wrap; padding-top: 24px; }
.pie-legal a { color: #9296a0; font-size: 15px; }
.pie-legal a:hover { color: var(--amarillo); }


/* ============================================================================
   6. RESPONSIVE
   El export no tenia NI UNA media query. Con anchuras fijas, grids de 3-4
   columnas sin colapso y una nav sin wrap, era inutilizable por debajo de
   ~1100px, que es de donde viene la mayoria del trafico.
   ========================================================================= */

img, svg, video { max-width: 100%; }

/* --- <= 1024px : las rejillas anchas bajan a 2 columnas ------------------ */
@media (max-width: 1024px) {
  .u45,                       /* servicios: 3 col */
  .u64, .u71 {                /* filosofia y proceso: 4 col */
    grid-template-columns: repeat(2, 1fr);
  }
  .u27 { grid-template-columns: repeat(3, 1fr); }  /* metricas aguantan 3 */
  .u32 { padding: 88px 28px; }
  .u13 { padding: 72px 28px 0; gap: 40px; }
  .u89 { gap: 48px; }
}

/* --- <= 900px : una sola columna y menu hamburguesa --------------------- */
@media (max-width: 900px) {
  .nav-burger { display: flex; }

  .nav-menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 6px;
    padding: 14px 28px 22px;
    background: #ffffff; border-bottom: 1px solid #dadbdd;
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
  }
  .nav-menu.is-open { display: flex; }
  .nav-menu > a { padding: 12px 0; font-size: 19px; }
  .nav-menu > a:last-of-type { text-align: center; margin-top: 6px; }
  .lang-switch { align-self: flex-start; margin-top: 10px; }

  .u13,                       /* hero */
  .u33,                       /* junto a los emprendedores */
  .u52,                       /* unete a retia */
  .u89 {                      /* contacto + formulario */
    grid-template-columns: 1fr;
  }
  .u89 { gap: 44px; }
  .u23 { height: 380px; }     /* imagen del hero */
  .u57 { height: 340px; }     /* imagen de unete */
  .u92 { height: 220px; }     /* imagen de contacto */

  /* La miniatura sobresalia 56px por la izquierda, pensada para 1200px */
  .u25 { left: 16px; bottom: 16px; width: 160px; height: 120px; }

  .u14 { font-size: clamp(38px, 8vw, 58px); }
  .u34, .u43 { font-size: clamp(34px, 6.4vw, 48px); }
  .u54, .u69 { font-size: clamp(32px, 6vw, 44px); }
  .u39, .u40, .u44, .u80, .u90 { font-size: 21px; }
  .u18 { font-size: 20px; }
  .u58 { margin-top: 56px; font-size: 24px; }
}

/* --- <= 640px : movil ---------------------------------------------------- */
@media (max-width: 640px) {
  .u27,                       /* metricas del hero */
  .u45,                       /* servicios */
  .u59,
  .u64, .u71,                 /* filosofia y proceso */
  .u97 {                      /* telefono + email */
    grid-template-columns: 1fr;
  }
  /* Las metricas del hero se separaban con un borde IZQUIERDO pensado para
     3 columnas: apiladas, dejaba a "Escala" y "Continuidad" sangradas 40px
     con una linea vertical suelta. Apiladas, el separador va arriba. */
  .u31 { padding: 36px 0 0; border-left: none; border-top: 1px solid rgba(255,255,255,.14); }
  .u28 { padding: 36px 0 0; }

  .u32 { padding: 64px 20px; }
  .u13 { padding: 48px 20px 0; }
  .u3  { padding: 0 20px; }
  .nav-menu { padding: 14px 20px 22px; }
  .u102 { padding: 48px 20px 32px; flex-direction: column; gap: 28px; }
  .u105 { gap: 20px 24px; }

  .u46, .u49, .u72, .u77 { padding: 26px; min-height: 0; }
  .u23 { height: 300px; }
  .u57 { height: 260px; }
  .u92 { height: 190px; }
  .u25 { width: 130px; height: 98px; }

  .u14 { font-size: clamp(32px, 9vw, 44px); }
  .u29 { font-size: 32px; }   /* Independencia / Escala / Continuidad */
  .u47, .u66, .u75, .u84 { font-size: 22px; }
  .u61 { font-size: 25px; }
  .u85 { width: 38px; height: 38px; font-size: 22px; }
  .u83 { padding: 22px 0; gap: 20px; }
  .form-sent { padding: 28px; }
  .u19 { gap: 12px; }
  .u19 > a { flex: 1 1 100%; text-align: center; }
}

/* --- pantallas muy estrechas -------------------------------------------- */
@media (max-width: 380px) {
  .u4, .u103 { font-size: 22px; }
  .u32 { padding: 56px 16px; }
  .u13 { padding: 40px 16px 0; }
  .u3  { padding: 0 16px; }
}


/* ============================================================================
   7. PÁGINAS INTERIORES (aviso legal, privacidad, 404)
   Columna de lectura estrecha, la misma tipografía y el mismo amarillo de
   marca. No compiten con la portada: aquí manda la legibilidad.
   ========================================================================= */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 88px 32px 120px;
  font-size: 18px;
  line-height: 1.65;
  color: #3d3f44;
}
.legal h1 {
  margin: 0 0 10px;
  font-size: clamp(38px, 5.5vw, 60px);
  line-height: 1.04;
  letter-spacing: -.04em;
  font-weight: 700;
  color: var(--tinta);
  text-wrap: balance;
}
.legal h2 {
  margin: 56px 0 14px;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--tinta);
  text-wrap: balance;
}
.legal p { margin: 0 0 18px; text-wrap: pretty; }
.legal ul { margin: 0 0 18px; padding-left: 22px; }
.legal li { margin-bottom: 10px; }
.legal a { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--verde); text-decoration-color: var(--amarillo); }
.legal strong { color: var(--tinta); font-weight: 700; }

.legal-fecha {
  margin: 0 0 40px;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gris);
}
.legal-volver { margin-bottom: 28px; font-size: 16px; }
.legal-volver a { text-decoration: none; color: var(--gris); font-weight: 500; }
.legal-volver a:hover { color: var(--tinta); }

.legal-datos { list-style: none; padding-left: 0; }
.legal-datos li {
  padding: 12px 0;
  border-bottom: 1px solid #e6e8e6;
}
.legal-nota { color: var(--gris); font-size: 16px; }

/* Aviso de documento incompleto: tiene que cantar, para que los datos del
   titular no se queden sin rellenar indefinidamente. */
.legal-aviso {
  margin: 0 0 44px;
  padding: 20px 24px;
  background: #fffbe6;
  border: 1px solid var(--amarillo);
  border-left-width: 5px;
  border-radius: 10px;
  font-size: 17px;
  line-height: 1.55;
  color: #4a3f00;
}

/* Marcador de dato pendiente, dentro del texto. */
.pendiente {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 6px;
  background: #fff2b8;
  border: 1px dashed #c9a400;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #6b5600;
}

@media (max-width: 640px) {
  .legal { padding: 56px 20px 88px; font-size: 17px; }
  .legal h2 { margin-top: 44px; font-size: 22px; }
  .legal-aviso { padding: 18px 20px; font-size: 16px; }
}