/* ==========================================================================
   Adrián Tomás García — portfolio
   Hoja compartida por /es/, /en/ y /pl/.
   Desktop-first: la base es ≥1024px; los breakpoints degradan hacia abajo.
   ========================================================================== */

:root{
  /* Color (§7) */
  --bg:          #0E1013;
  --bg-raised:   #14171B;
  --text:        #E8E6E0;
  --text-dim:    #8A9099;
  --accent:      #5EEAD4;   /* cian técnico */
  --accent-2:    #F0A860;   /* ámbar de medición: unidades, micro-detalles */
  --rule:        #2A2E33;   /* hairlines tipo plano técnico */

  /* Tipografía */
  --mono: "JetBrains Mono", ui-monospace, "IBM Plex Mono", Menlo, Consolas, monospace;
  --sans: "Inter", "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Ritmo */
  --gap:      24px;
  --section:  112px;
  --maxw:     1240px;

  /* Movimiento: mismo easing en acordeón, FLIP de bullets y FLIP del canvas */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur:      380ms;
  
  /* Imagenes */
  --image-size: 300px;
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; }

h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.14; }

ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; }

.mono{ font-family:var(--mono); }

/* Accesible pero invisible: títulos de sección para lectores de pantalla */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ==========================================================================
   Elemento firma: hairline con marcas de cota (línea de acotación CAD).
   Se reutiliza entre la barra de contacto y el hero, y entre bloques.
   ========================================================================== */
.dim-rule{
  position:relative;
  height:1px;
  background:var(--rule);
  /* ticks finos regulares, como las divisiones de una cota */
  background-image:linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 100%);
  background-size:16px 1px;
  background-repeat:repeat-x;
  margin:0;
}
/* topes verticales en los extremos */
.dim-rule::before,
.dim-rule::after{
  content:"";
  position:absolute; top:-4px;
  width:1px; height:9px;
  background:var(--rule);
}
.dim-rule::before{ left:0; }
.dim-rule::after{ right:0; }

/* Variante con etiqueta de cota centrada */
.dim-rule--labelled{
  display:flex; align-items:center; gap:14px;
  height:auto; background:none;
}
.dim-rule--labelled::before,
.dim-rule--labelled::after{ display:none; }
.dim-rule--labelled > span{
  flex:0 0 auto;
  font-family:var(--mono);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-dim);
}
.dim-rule--labelled > i{
  flex:1 1 auto;
  height:1px;
  background:var(--rule);
  background-image:linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 100%);
  background-size:16px 1px;
}

/* ==========================================================================
   Barra de contacto (§7) — franja fina superior. Estática: se va con el
   scroll, no es sticky. La navegación sticky vive justo debajo.
   ========================================================================== */
.contact-bar{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.03em;
  color:var(--text-dim);
  padding:11px 0 10px;
}
.contact-bar .wrap{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.contact-bar a{ text-decoration:none; transition:color .18s var(--ease); }
.contact-bar a:hover{ color:var(--accent); }
.contact-bar .cb-item{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.contact-bar .cb-item svg{ width:12px; height:12px; flex:0 0 auto; opacity:.7; }
.contact-bar .cb-loc{ color:var(--accent-2); }
.contact-bar .cb-spacer{ flex:1 1 auto; }

/* Selector de idioma */
.lang-switch{ display:inline-flex; align-items:center; gap:2px; }
.lang-switch a{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:2px;
  border:1px solid transparent;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.lang-switch a:hover{ border-color:var(--rule); }
.lang-switch a[aria-current="true"]{ color:var(--text); border-color:var(--rule); }
.lang-switch img{ width:16px; height:11px; display:block; object-fit:cover; border-radius:1px; }

/* ==========================================================================
   Navegación sticky: enlaces de sección + toggle de perfil
   ========================================================================== */
.site-nav{
  position:sticky; top:0; z-index:60;
  background:rgba(14,16,19,.9);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.site-nav .wrap{
  display:flex; align-items:center; gap:26px;
  min-height:52px;
}
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{
  font-family:var(--mono);
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-dim); text-decoration:none;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.nav-links a:hover{ color:var(--text); border-bottom-color:var(--rule); }
.nav-links a.is-active{ color:var(--accent); border-bottom-color:var(--accent); }
.site-nav .nav-spacer{ flex:1 1 auto; }

/* Toggle de perfil (§15) — pill switch de dos estados */
.profile-toggle{
  display:inline-flex; align-items:stretch;
  border:1px solid var(--rule); border-radius:3px;
  overflow:hidden;
}
.profile-toggle button{
  appearance:none; cursor:pointer;
  background:transparent; border:0;
  font-family:var(--mono); font-size:11px; letter-spacing:.07em;
  color:var(--text-dim);
  padding:7px 13px;
  display:inline-flex; align-items:center; gap:7px;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.profile-toggle button:hover{ color:var(--text); }
.profile-toggle button[aria-pressed="true"]{
  background:rgba(94,234,212,.11);
  color:var(--accent);
}
.profile-toggle button:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

/* Botón de menú móvil: oculto en desktop */
.nav-burger{ display:none; }

/* ==========================================================================
   Hero (§7) — continuación visual de la cabecera, no una sección aparte
   ========================================================================== */
/* Separador de firma entre la cabecera y el hero */
.hero-rule{ padding:34px 0 0; }

.hero{ padding:40px 0 var(--section); }
.hero .wrap{
  display:grid;
  grid-template-columns:var(--image-size) minmax(0,1fr);
  gap:44px;
  align-items:start;
}
.hero-photo{
  position:relative;
  width:var(--image-size); aspect-ratio:1/1;   /* contenedor 1:1: acepta retrato o editorial */
  border:1px solid var(--rule);
  border-radius:2px;
  overflow:hidden;
  background:var(--bg-raised);
}
.hero-photo .profile-image{ width:100%; height:100%; object-fit:cover; display:block; }
/* marcas de esquina, lenguaje de plano técnico */
.hero-photo::after{
  content:"";
  position:absolute; inset:7px;
  border:1px solid rgba(232,230,224,.10);
  pointer-events:none;
}

.hero-eyebrow{
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:16px;
}
.hero h1{
  font-family:var(--mono);
  font-size:clamp(30px, 3.6vw, 46px);
  letter-spacing:-.02em;
  font-weight:600;
}
.hero-title{
  font-family:var(--mono);
  font-size:clamp(14px, 1.45vw, 18px);
  letter-spacing:.01em;
  color:var(--accent);
  margin:14px 0 0;
  font-weight:500;
}
.hero-title .arrow{ color:var(--text-dim); margin:0 6px; }
.hero-summary{ margin:26px 0 0; max-width:66ch; }
.hero-summary p{ margin:0 0 14px; color:#CFCDC7; }
.hero-summary p:first-child{
  font-size:18px; color:var(--text); font-weight:500;
}
.hero-summary p:last-child{ margin-bottom:0; }

/* ==========================================================================
   Secciones genéricas
   ========================================================================== */
.section{ padding:0 0 var(--section); }
.section-head{ margin-bottom:40px; }
.section-head .num{
  font-family:var(--mono);
  font-size:clamp(24px, 2.8vw, 32px); letter-spacing:.03em; font-weight:600;
  color:var(--accent-2);
  display:block; margin-bottom:14px;
}
.section-head h2{
  font-family:var(--mono);
  font-size:clamp(20px, 2.1vw, 27px);
  letter-spacing:-.01em;
}
.section-head .lede{
  margin:14px 0 0; max-width:64ch; color:var(--text-dim); font-size:15px;
}

/* ==========================================================================
   Bloque de experiencia / proyecto con animación (§8)
   Desktop: dos columnas — texto izquierda, canvas derecha (tamaño fijo).
   ========================================================================== */
.exp-list{ display:flex; flex-direction:column; }

.exp-block{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,540px);
  gap:56px;
  align-items:start;
  padding:40px 0;
}
.exp-block + .exp-block,
.exp-sep{ border-top:1px solid transparent; }
/* separador = elemento firma */
.exp-sep{ padding:0; }

.exp-text{ min-width:0; }

.exp-role{
  display:block;
  font-family:var(--mono);
  font-size:clamp(19px, 1.6vw, 20px);
  letter-spacing:-.01em;
  font-weight:600;
}
.exp-company{ display:block; color:var(--accent); margin-top:4px; font-size:16px; }
.exp-meta{
  font-family:var(--mono);
  font-size:11.5px; letter-spacing:.07em;
  color:var(--text-dim);
  margin-top:9px;
  display:flex; flex-wrap:wrap; gap:8px 16px;
}
/* Segundo span = fechas, por convención del marcado (ciudad, fechas, idioma) */
.exp-meta > span:nth-child(2){ font-size:14px; }
.exp-meta .lang-tag{ color:var(--accent-2); }

.bullets{
  margin:22px 0 0;
  padding-left:32px;   /* alineado con el texto del título */
  display:flex; flex-direction:column; gap:13px;
}
.bullets li{
  position:relative;
  padding-left:20px;
  font-size:15px;
  color:#CFCDC7;
  will-change:transform;   /* el FLIP del toggle de perfil anima transform */
}
.bullets li::before{
  content:"";
  position:absolute; left:0; top:.72em;
  width:9px; height:1px;
  background:var(--accent);
  opacity:.65;
}
.bullets strong{ color:var(--text); font-weight:600; }

.exp-links{
  margin:24px 0 0 32px;
  display:flex; flex-wrap:wrap; gap:12px;
}

/* Botón/enlace a repositorio */
.repo-link{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-decoration:none;
  color:var(--text);
  border:1px solid var(--rule); border-radius:2px;
  padding:8px 13px;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.repo-link:hover{ border-color:var(--accent); color:var(--accent); background:rgba(94,234,212,.06); }
.repo-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.repo-link svg{ width:14px; height:14px; }
/* Placeholder: repo aún no publicado. Se marca visualmente y no es un enlace. */
.repo-link--pending{
  color:var(--text-dim);
  border-style:dashed;
  cursor:default;
}

/* Columna de animación: el canvas no cambia de tamaño con el texto, solo se
   recentra verticalmente frente a él. `align-self:center` lo consigue sin JS. */
.anim-col{
  position:relative;
  align-self:center;
}
.anim-frame{
  position:relative;
  width:100%;
  height:440px;
  border:1px solid var(--rule);
  border-radius:2px;
  overflow:hidden;
  background:var(--bg-raised);
  /* Los HUD de las animaciones se adaptan al ancho del MARCO, no del viewport:
     un marco de 540px en una pantalla de 1440px necesita el layout compacto. */
  container-type:inline-size;
  container-name:anim;
}
.anim-frame > canvas{ display:block; width:100%; height:100%; }

/* Estado en reposo: se muestra hasta que el módulo se inicializa */
.anim-idle{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-dim);
}
.anim-frame.is-live .anim-idle{ display:none; }

.anim-caption{
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--text-dim);
  margin-top:12px;
  display:flex; gap:10px; align-items:baseline;
}
.anim-caption b{ color:var(--accent-2); font-weight:400; }

/* Entrada ligera: sin animación, visualmente más liviana (Talleres Óñiga) */
.exp-block--light{
  grid-template-columns:minmax(0,1fr);
  gap:0;
  padding:32px 0;
}
.exp-block--light .exp-role{ font-size:clamp(15px,1.35vw,17px); }
.exp-block--light .exp-company{ font-size:13px; }
.exp-block--light .bullets{ margin-top:20px; padding-left:0; }

/* ==========================================================================
   Habilidades (§9) — niveles de dominio con indicador tipo instrumento
   ========================================================================== */
.skill-tiers{ display:flex; flex-direction:column; gap:34px; }

.tier-head{
  display:flex; align-items:baseline; gap:16px;
  margin-bottom:18px;
}
.tier-head h3{
  font-family:var(--mono);
  font-size:14px; letter-spacing:.02em; font-weight:600;
}
.tier-head .tier-note{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-dim);
}

/* Indicador: 3 divisiones encendidas según el nivel, no una barra de % */
.gauge{ display:inline-flex; gap:3px; align-items:flex-end; height:14px; }
.gauge i{
  display:block; width:6px;
  background:var(--rule);
  border-radius:1px;
}
.gauge i:nth-child(1){ height:6px; }
.gauge i:nth-child(2){ height:10px; }
.gauge i:nth-child(3){ height:14px; }
.gauge[data-level="3"] i{ background:var(--accent); }
.gauge[data-level="2"] i:nth-child(-n+2){ background:var(--accent); }
.gauge[data-level="1"] i:nth-child(1){ background:var(--accent); }

.skill-set{ display:flex; flex-wrap:wrap; gap:9px; }
.skill{
  font-family:var(--mono); font-size:12px; letter-spacing:.03em;
  border:1px solid var(--rule); border-radius:2px;
  padding:6px 11px;
  color:#CFCDC7;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
a.skill:hover{ border-color:var(--accent); color:var(--accent); }
/* Ancla desde una tecnología hacia la experiencia que la demuestra */
a.skill::after{
  content:"↳";
  font-size:10px; color:var(--text-dim);
}
a.skill:hover::after{ color:var(--accent); }

/* ==========================================================================
   ¿Qué puedo hacer por vosotros? (§10) — 3 puntos, afirmación + hecho
   ========================================================================== */
.value-props{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.value-prop{
  background:var(--bg);
  padding:30px 28px;
}
.value-prop .vp-num{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  color:var(--accent-2); display:block; margin-bottom:16px;
}
.value-prop h3{
  font-family:var(--mono); font-size:15px; line-height:1.4;
  margin-bottom:13px;
}
.value-prop p{ margin:0; font-size:14.5px; color:var(--text-dim); }
.value-prop .vp-trace{
  margin-top:18px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  color:var(--accent); text-transform:uppercase;
}

/* ==========================================================================
   Logros y publicaciones (§11) — tarjetas, cronológico inverso
   ========================================================================== */
.cards{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px;
}
.card{
  position:relative;
  border:1px solid var(--rule); border-radius:2px;
  padding:26px 24px;
  display:flex; flex-direction:column; gap:11px;
  background:var(--bg);
}
/* Con enlace: tarjeta entera clicable. Sin enlace: mismo formato, sin <a>. */
a.card{ text-decoration:none; transition:border-color .2s var(--ease), background .2s var(--ease); }
a.card:hover{ border-color:var(--accent); background:rgba(94,234,212,.04); }
a.card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.card .card-year{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  color:var(--accent-2);
}
.card h3{ font-size:15.5px; line-height:1.4; padding-right:22px; }
.card p{ margin:0; font-size:14px; color:var(--text-dim); }
a.card .ext{
  position:absolute; top:24px; right:22px;
  font-family:var(--mono); font-size:13px; color:var(--text-dim);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
a.card:hover .ext{ color:var(--accent); transform:translate(2px,-2px); }

/* ==========================================================================
   Educación (§12) — timeline simple, sin acordeón
   ========================================================================== */
.timeline{
  display:flex; flex-direction:column;
  border-left:1px solid var(--rule);
  padding-left:0;
}
.tl-item{
  position:relative;
  padding:22px 0 22px 34px;
}
.tl-item::before{
  content:"";
  position:absolute; left:-1px; top:31px;
  width:19px; height:1px; background:var(--rule);
}
.tl-item::after{
  content:"";
  position:absolute; left:-3px; top:28px;
  width:5px; height:5px; border-radius:50%;
  background:var(--bg); border:1px solid var(--accent);
}
.tl-item h3{ font-family:var(--mono); font-size:15px; }
.tl-item .tl-org{ color:var(--accent); }
.tl-item .tl-meta{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--text-dim); margin-top:7px;
}
/* Formación musical: se distingue con el ámbar de medición */
.tl-item--music::after{ border-color:var(--accent-2); }
.tl-item--music .tl-org{ color:var(--accent-2); }

.bio-aside{
  margin-top:38px;
  border-left:2px solid var(--accent-2);
  padding:4px 0 4px 22px;
  max-width:62ch;
  color:#CFCDC7;
  font-size:15px;
}

/* ==========================================================================
   Idiomas (§13)
   ========================================================================== */
.lang-list{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px;
}
.lang-item{
  border-top:1px solid var(--rule);
  padding-top:18px;
}
.lang-item h3{ font-family:var(--mono); font-size:15px; }
.lang-item .level{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent);
  margin-top:8px;
}
.lang-item p{ margin:9px 0 0; font-size:14px; color:var(--text-dim); }

/* ==========================================================================
   Contacto final (§14) — CTA con más peso que la barra superior
   ========================================================================== */
.contact-final{ padding-bottom:96px; }
.contact-rule{ margin-bottom:52px; }
.contact-final .section-head{ margin-bottom:34px; }
.contact-final h2{
  font-family:var(--mono);
  font-size:clamp(24px, 3vw, 38px);
  letter-spacing:-.02em;
}
.contact-final .lede{
  margin:20px 0 34px; max-width:56ch; font-size:16.5px; color:#CFCDC7;
}
.contact-cta{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:14px; letter-spacing:.02em;
  text-decoration:none;
  color:var(--bg); background:var(--accent);
  border:1px solid var(--accent); border-radius:2px;
  padding:14px 22px;
  transition:filter .2s var(--ease), transform .2s var(--ease);
}
.contact-cta:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.contact-cta:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.contact-alt{
  margin-top:34px;
  display:flex; flex-wrap:wrap; gap:14px 28px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.04em;
}
.contact-alt a{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; color:var(--text-dim);
  border-bottom:1px solid var(--rule);
  padding-bottom:3px;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.contact-alt a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.contact-alt svg{ width:14px; height:14px; }

.site-foot{
  border-top:1px solid var(--rule);
  padding:22px 0 30px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-dim);
}
.site-foot .wrap{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }

/* ==========================================================================
   Tablet — ≤1180px: el canvas se estrecha antes de colapsar
   ========================================================================== */
@media (max-width:1180px){
  :root{ --section:88px; }
  .wrap{ padding:0 28px; }
  .exp-block{ grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:36px; }
  .anim-frame{ height:380px; }
  .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ==========================================================================
   Móvil — ≤860px: una columna. Orden apilado: título → animación → bullets.
   ========================================================================== */
@media (max-width:860px){
  :root{ --section:72px; --image-size:132px; }
  .wrap{ padding:0 20px; }

  html{ scroll-padding-top:120px; }

  /* Barra de contacto: se apila y deja el selector de idioma accesible */
  .contact-bar{ font-size:11px; }
  .contact-bar .wrap{ gap:12px 18px; }
  .contact-bar .cb-spacer{ display:none; }
  .contact-bar .lang-switch{ order:-1; width:100%; }

  /* Navegación: enlaces colapsados detrás de un botón */
  .site-nav .wrap{ flex-wrap:wrap; padding-top:8px; padding-bottom:8px; }
  .nav-burger{
    display:inline-flex; align-items:center; gap:9px;
    appearance:none; cursor:pointer; background:none;
    border:1px solid var(--rule); border-radius:2px;
    color:var(--text-dim);
    font-family:var(--mono); font-size:11px; letter-spacing:.09em;
    text-transform:uppercase; padding:7px 11px;
  }
  .nav-burger:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .nav-links{
    display:none;
    order:3; width:100%;
    flex-direction:column; align-items:flex-start; gap:0;
    padding:6px 0 10px;
  }
  .nav-links.is-open{ display:flex; }
  .nav-links a{ width:100%; padding:9px 0; border-bottom:1px solid var(--rule); }
  .site-nav .nav-spacer{ flex:1 1 auto; }

  /* Hero: foto arriba, texto debajo */
  .hero{ padding:34px 0 var(--section); }
  .hero .wrap{ grid-template-columns:minmax(0,1fr); gap:26px; }
  .hero-summary p:first-child{ font-size:16.5px; }

  /* Experiencia: una columna, animación entre título y bullets */
  .exp-block{
    grid-template-columns:minmax(0,1fr);
    gap:0;
    padding:30px 0;
  }
  .exp-text{ display:contents; }
  .exp-toggle{ order:1; }
  .anim-col{ order:2; margin:24px 0 0; }
  .exp-body{ order:3; }
  .anim-frame{ height:320px; }

  .bullets{ padding-left:0; }
  .exp-links{ margin-left:0; }

  .value-props{ grid-template-columns:minmax(0,1fr); }
  .cards{ grid-template-columns:minmax(0,1fr); }
  .lang-list{ grid-template-columns:minmax(0,1fr); gap:0; }
  .lang-item{ padding:16px 0; }

  .contact-final .lede{ font-size:15.5px; }
  .site-foot .wrap{ flex-direction:column; gap:8px; }
}

@media (max-width:420px){
  .anim-frame{ height:270px; }
  .tier-head{ flex-direction:column; gap:8px; align-items:flex-start; }
}

/* ==========================================================================
   prefers-reduced-motion (§8, §15, §16): sin transiciones, salto directo al
   estado final. main.js consulta la misma media query para el FLIP.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    transition-duration:0.01ms !important;
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
  }
}