/* ===========================================================================
   eriktaveras.com · CV · sistema TALLER (el mismo de cursos.eriktaveras.com)

   Móvil primero: los estilos base son los del teléfono y solo crecen con
   min-width (600, 760, 1000, 1240). Diseño de referencia: design/*.dc.html.

   Reglas de la casa:
     1. Titula Big Shoulders Display, lee Hanken Grotesk, rotula IBM Plex Mono.
     2. Papel gris frío, tinta casi negra.
     3. Verde partido en tres: #047857 lleva texto, #10b981 solo decora,
        #34D399 es el acento sobre la tinta.
     4. Radios chicos: 4 en etiquetas, 6 en lo que se pulsa, 8 en lo que agrupa.
     5. Los logos van en tinta; su color de marca aparece al pasar el ratón.
   =========================================================================== */

:root {
  color-scheme: light;
  --papel: #F1F2EE;
  --papel-2: #E6E8E2;
  --papel-3: #FFFFFF;
  --papel-4: #F7F8F5;
  --tinta: #101318;
  --tinta-2: #353B44;
  --suave: #4A515B;
  --tenue: #5C636D;
  --linea: #D4D8D1;
  --linea-suave: #E1E4DE;
  --linea-media: #C3C8C0;
  --linea-fuerte: #9CA39B;
  --verde: #10b981;
  --verde-ink: #047857;
  --verde-hondo: #064E3B;
  --verde-claro: #34D399;
  --verde-bg: #E2F4EB;
  --verde-linea: #B5DCC6;
  --rojo-ink: #8E2A17;
  --rojo-bg: #F8D9D2;
  --rojo-linea: #D89B8C;
  --noche: #101318;
  --noche-2: #181C22;
  --noche-texto: #F1F2EE;
  --noche-suave: #C2C7C0;
  --noche-tenue: #A7AEA7;
  --noche-linea: rgba(241, 242, 238, 0.16);

  --display: 'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --tap: 48px;
  --ancho: 1232px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --plano:
    linear-gradient(rgba(16, 19, 24, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 19, 24, 0.055) 1px, transparent 1px);
  --plano-noche:
    linear-gradient(rgba(241, 242, 238, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241, 242, 238, 0.045) 1px, transparent 1px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: style;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--verde-ink); text-underline-offset: 3px; }
a:hover { color: var(--verde-hondo); }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
figure { margin: 0; }
strong { font-weight: 600; color: var(--tinta); }

:focus-visible { outline: 3px solid var(--verde-ink); outline-offset: 2px; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 16px; background: var(--tinta); color: var(--papel);
  font-family: var(--mono); font-size: 12px;
}
.saltar:focus { left: 0; }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.icono { flex: none; display: inline-block; vertical-align: middle; }

/* ------------------------------------------------------------- layout - */

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
@media (min-width: 760px) { .envoltura { padding: 0 32px; } }
@media (min-width: 1240px) { .envoltura { padding: 0 40px; } }

.principal { flex: 1 0 auto; }

.seccion { padding: 56px 0; }
.seccion--linea { border-bottom: 1px solid var(--linea); }
.seccion--banda { background: var(--papel-2); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.seccion--plano { background-image: var(--plano); background-size: 32px 32px; }
.seccion--noche {
  background-color: var(--noche); background-image: var(--plano-noche); background-size: 32px 32px;
  color: var(--noche-texto);
}
@media (min-width: 1000px) { .seccion { padding: 96px 0; } }

/* Dos columnas en escritorio: la cabeza de la sección a la izquierda. */
.partida { display: grid; gap: 28px; }
@media (min-width: 1000px) {
  .partida { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; align-items: start; }
  .partida > .partida__cabeza { grid-column: span 4; }
  .partida > .partida__cuerpo { grid-column: span 8; }
  .partida--3 > .partida__cabeza { grid-column: span 3; }
  .partida--3 > .partida__cuerpo { grid-column: span 9; }
  .partida--centro { align-items: center; }
}

.cabeza { display: flex; flex-direction: column; gap: 14px; }

/* ---------------------------------------------------------- tipografía - */

.rotulo {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tenue);
}
.rotulo--verde { color: var(--verde-ink); }
.rotulo--claro { color: var(--verde-claro); }
.rotulo--chico { font-size: 11px; }

.titular {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(76px, 19vw, 136px); line-height: 0.86; letter-spacing: -0.01em;
}
@media (min-width: 1000px) { .titular { font-size: clamp(88px, 9.4vw, 136px); } }

.h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(44px, 9vw, 72px); line-height: 0.9;
}
/* En las columnas angostas del escritorio el título baja de cuerpo para no partir palabras. */
@media (min-width: 1000px) {
  .partida--3 .h2 { font-size: clamp(38px, 3.9vw, 56px); }
  .h2--compacto { font-size: clamp(44px, 5vw, 64px); }
}
.h2--noche { color: var(--noche-texto); }

.bajada { font-size: clamp(20px, 2.6vw, 26px); line-height: 1.3; font-weight: 600; max-width: 34ch; }
.parrafo { font-size: 17px; color: var(--tinta-2); max-width: 60ch; }
.parrafo--suave { color: var(--suave); }
.parrafo--noche { color: var(--noche-suave); }

/* ------------------------------------------------------------- botones - */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap); padding: 12px 24px;
  border: 1.5px solid var(--tinta); border-radius: var(--r-md);
  background: transparent; color: var(--tinta);
  font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.boton:hover { background-color: rgba(16, 19, 24, 0.05); color: var(--tinta); }

.boton--primario {
  min-height: 56px; padding: 14px 28px;
  background: var(--verde-ink); border-color: var(--verde-ink); color: #FFFFFF; font-size: 17px;
}
.boton.boton--primario:hover { background: var(--verde-hondo); border-color: var(--verde-hondo); color: #FFFFFF; }

.boton--fantasma { min-height: 56px; border-color: var(--linea-fuerte); color: var(--tinta-2); font-weight: 500; }
.boton.boton--fantasma:hover { border-color: var(--tinta); background: transparent; }

.boton--oscuro { background: var(--tinta); color: var(--papel); }
.boton.boton--oscuro:hover { background: var(--verde-hondo); border-color: var(--verde-hondo); color: #FFFFFF; }

.boton--claro { min-height: 56px; background: var(--noche-texto); border-color: var(--noche-texto); color: var(--tinta); font-size: 17px; }
.boton.boton--claro:hover { background: var(--verde-claro); border-color: var(--verde-claro); color: var(--tinta); }

.boton--bloque { display: flex; width: 100%; }

.enlace-mono {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tinta);
  text-decoration: underline; text-decoration-color: var(--verde);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.enlace-mono:hover { color: var(--tinta); text-decoration-color: var(--tinta); }
.enlace-mono--noche { color: var(--noche-texto); text-decoration-color: var(--verde-claro); }
.enlace-mono--noche:hover { color: var(--noche-texto); text-decoration-color: var(--noche-texto); }
.enlace-mono--discreto { color: var(--noche-suave); font-weight: 500; text-decoration: none; }
.enlace-mono--discreto:hover { color: var(--noche-texto); }

.enlace-accion {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap);
  font-size: 15px; font-weight: 600; color: var(--verde-ink); text-decoration: none;
}
.enlace-accion:hover { text-decoration: underline; text-underline-offset: 4px; }
.enlace-accion--noche { color: var(--verde-claro); }
.enlace-accion--noche:hover { color: var(--verde-claro); }

/* ------------------------------------------------------------ píldoras - */

.pildora {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 3px 8px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-sm);
  background: var(--papel-3); color: var(--tinta-2);
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap;
}
.pildora__punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pildora--verde { background: var(--verde-bg); border-color: var(--verde-linea); color: var(--verde-ink); }
.pildora--noche { background: #13261F; border-color: #245140; color: var(--verde-claro); }

/* -------------------------------------------------------------- cabecera - */

.marca { border-bottom: 1px solid var(--linea); background: var(--papel); position: relative; z-index: 10; }
.marca__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
@media (min-width: 1000px) { .marca__fila { min-height: 72px; } }

.marca__logo {
  display: inline-flex; align-items: center; gap: 12px; min-height: var(--tap);
  color: var(--tinta); text-decoration: none;
}
.marca__logo:hover { color: var(--tinta); }
.marca__nombre { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; }

.marca__nav { display: none; }
.marca__enlace {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px;
  font-size: 15px; font-weight: 500; color: var(--tinta-2); text-decoration: none;
}
.marca__enlace:hover { color: var(--tinta); }
.marca__enlace[aria-current="page"] {
  color: var(--tinta); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--verde);
  text-decoration-thickness: 2px; text-underline-offset: 8px;
}
.marca__boton { min-height: 44px; margin-left: 12px; padding: 0 16px; font-size: 15px; }

@media (min-width: 1000px) {
  .marca__nav { display: flex; align-items: center; gap: 4px; }
  .menu { display: none; }
}

/* Menú del teléfono: <details>, funciona sin JavaScript. */
.menu > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--tinta); border-radius: var(--r-md);
  font-size: 15px; font-weight: 600; cursor: pointer; list-style: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu .icono--cerrar { display: none; }
.menu[open] .icono--cerrar { display: inline-block; }
.menu[open] .icono--abrir { display: none; }
.menu__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  padding: 8px 20px 20px; background: var(--papel);
  border-bottom: 1.5px solid var(--tinta);
  display: flex; flex-direction: column;
}
.menu__panel a:not(.boton) {
  display: flex; align-items: center; min-height: 52px;
  border-bottom: 1px solid var(--linea); font-size: 18px; font-weight: 600;
  color: var(--tinta); text-decoration: none;
}
.menu__panel .boton { margin-top: 16px; }

/* ------------------------------------------------------------------ hero - */

.hero { padding: 32px 0 44px; border-bottom: 1px solid var(--linea); background-image: var(--plano); background-size: 32px 32px; }
.hero__rejilla { display: grid; gap: 22px; }
.hero__texto { display: flex; flex-direction: column; gap: 20px; }
.hero__foto { order: -1; }
@media (min-width: 1000px) {
  .hero { padding: 72px 0 80px; }
  .hero__rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; align-items: center; }
  .hero__texto { grid-column: span 7; gap: 24px; }
  .hero__foto { order: 0; grid-column: span 5; }
  .hero__rejilla > .isla { grid-column: span 5; }
}

.foto { background: var(--papel-3); border: 2px solid var(--tinta); border-radius: var(--r-lg); overflow: hidden; }
.foto img { width: 100%; height: 240px; object-fit: cover; object-position: 50% 28%; }
.foto__pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--linea);
}
.foto__pie .rotulo { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; }
@media (min-width: 600px) { .foto img { height: 360px; } }
@media (min-width: 1000px) {
  .foto img { height: 500px; }
  .foto__pie { padding: 14px 22px; }
}

.acciones { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 600px) { .acciones { flex-direction: row; flex-wrap: wrap; gap: 16px; } }

.perfiles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.perfiles__boton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-md);
  background: var(--papel-3); color: var(--tinta);
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.perfiles__boton:hover { border-color: var(--tinta); color: var(--tinta); }
.perfiles__boton:hover .icono--marca { color: var(--marca); }
@media (min-width: 600px) { .perfiles .enlace-mono { margin-left: 10px; } }

/* La ficha: la placa de datos. En el teléfono va en filas. */
.ficha {
  display: flex; flex-direction: column; align-self: stretch;
  background: var(--papel-3); border: 1px solid var(--tinta); border-radius: var(--r-md);
}
.ficha__celda {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px;
}
.ficha__celda + .ficha__celda { border-top: 1px solid var(--linea); }
.ficha__valor { font-size: 15px; font-weight: 600; text-align: right; }
@media (min-width: 760px) {
  .ficha { flex-direction: row; align-self: flex-start; }
  .ficha__celda { flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 22px; }
  .ficha__celda + .ficha__celda { border-top: 0; border-left: 1px solid var(--linea); }
  .ficha__valor { font-size: 17px; text-align: left; }
}

/* --------------------------------------------------- tira de tecnologías - */

.tira { padding: 24px 0 28px; background: var(--papel-2); border-bottom: 1px solid var(--linea); }
.tira .rotulo { display: block; margin-bottom: 14px; }
.tira__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tira__item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 2px 10px; background: var(--papel-3);
  border: 1px solid var(--linea); border-radius: var(--r-md);
  color: var(--tinta); transition: border-color .15s var(--ease);
}
.tira__item .icono--marca { transition: color .15s var(--ease); }
.tira__item:hover { border-color: var(--linea-fuerte); }
.tira__item:hover .icono--marca { color: var(--marca); }
.tira__nombre { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--tinta-2); text-align: center; }
@media (min-width: 600px) { .tira__lista { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .tira { padding: 28px 0 32px; }
  .tira__lista { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
  .tira__item { padding: 16px 4px 14px; gap: 10px; }
  .tira__nombre { font-size: 11px; }
}

/* ---------------------------------------------------------- experiencia - */

.cargos { border-top: 1.5px solid var(--tinta); }
.cargo { display: grid; gap: 12px; padding: 24px 0; border-bottom: 1px solid var(--linea); }
.cargo__fechas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cargo__periodo { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.cargo__duracion { font-family: var(--mono); font-size: 12px; color: var(--tenue); }
.cargo__cuerpo { display: flex; flex-direction: column; gap: 14px; }
.cargo__titulo { font-size: 22px; font-weight: 600; line-height: 1.2; }
.cargo__empresa { margin-top: -8px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--verde-ink); }
@media (min-width: 760px) {
  .cargo { grid-template-columns: 180px minmax(0, 1fr); gap: 32px; padding: 36px 0; }
  .cargo__fechas { flex-direction: column; align-items: flex-start; }
  .cargo__periodo { font-size: 14px; }
  .cargo__titulo { font-size: 28px; }
  .cargo__empresa { font-size: 13px; letter-spacing: 0.08em; }
}

.logros { display: flex; flex-direction: column; gap: 10px; }
.logros li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.logros li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 12px; height: 2px; background: var(--verde); }
@media (min-width: 760px) { .logros li { font-size: 16px; } }

.bloques { display: grid; gap: 12px; }
@media (min-width: 760px) { .bloques { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.bloque {
  display: flex; flex-direction: column; gap: 10px; padding: 16px 18px;
  background: var(--papel-3); border: 1.5px solid var(--tinta); border-radius: var(--r-md);
}
.bloque p { font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.bloque--destacado { background: var(--verde-bg); border-color: var(--verde-ink); }
.bloque--destacado .rotulo, .bloque--destacado p, .bloque--destacado strong { color: var(--verde-hondo); }
@media (min-width: 1000px) { .bloque { padding: 20px; } .bloque p { font-size: 15px; } }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
  background: var(--papel-3); border: 1px solid var(--linea); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 11px; color: var(--tinta-2);
}
.chip .icono { color: var(--tinta); }
@media (min-width: 760px) { .chips { gap: 8px; } .chip { padding: 4px 9px; font-size: 12px; } }

/* ------------------------------------------------------------ productos - */

.productos { border-top: 1px solid var(--noche-linea); }
.producto { border-bottom: 1px solid var(--noche-linea); }
.producto__enlace { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; color: var(--noche-texto); text-decoration: none; }
.producto__enlace:hover { color: var(--noche-texto); }
.producto__enlace:hover .producto__nombre { text-decoration: underline; text-decoration-color: var(--verde-claro); text-underline-offset: 5px; }
.producto__caja {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border: 1.5px solid var(--verde-claro); border-radius: var(--r-md); color: var(--verde-claro);
}
.producto__texto { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 4px; }
.producto__nombre { font-size: 20px; font-weight: 600; }
.producto__desc { font-size: 15px; line-height: 1.5; color: var(--noche-suave); }
.producto__enlace { flex-wrap: wrap; }
.producto__texto { flex-basis: calc(100% - 60px); }
.producto__estado { margin-left: 60px; margin-top: -6px; }
@media (min-width: 760px) {
  .producto__enlace { flex-wrap: nowrap; gap: 20px; padding: 24px 0; }
  .producto__texto { flex-basis: auto; padding-right: 16px; }
  .producto__nombre { font-size: 22px; }
  .producto__estado { flex: none; margin: 4px 0 0; }
}

/* ----------------------------------------------------------------- stack - */

/* Los filos entre celdas los pinta el hueco de 1px sobre el color de línea. */
.stack {
  display: grid; gap: 1px; background: var(--linea);
  border: 1px solid var(--tinta); border-radius: var(--r-md); overflow: hidden;
}
.stack__celda { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 20px; background: var(--papel-3); }
.stack__lista { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.stack__item { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.stack__item .icono--marca { transition: color .15s var(--ease); }
.stack__celda:hover .icono--marca { color: var(--marca); }
.stack__nota { font-size: 14px; line-height: 1.45; color: var(--suave); }
@media (min-width: 600px) { .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stack__celda { padding: 24px; gap: 14px; }
  .stack__lista { flex-direction: column; gap: 10px; }
  .stack__item { font-size: 16px; }
}

/* ------------------------------------------------------------- enseñanza - */

.filas { border-top: 1.5px solid var(--tinta); }
.fila { border-bottom: 1px solid var(--linea-media); }
.fila__enlace { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; color: var(--tinta); text-decoration: none; }
.fila__enlace:hover { color: var(--tinta); }
.fila__enlace:hover .fila__texto { text-decoration: underline; text-decoration-color: var(--verde); text-underline-offset: 5px; }
.fila__rotulo { display: flex; align-items: center; gap: 8px; }
.fila__rotulo .rotulo { font-size: 10px; color: var(--suave); }
.fila__texto { font-size: 16px; font-weight: 600; line-height: 1.4; }
.fila__flecha { display: none; color: var(--verde-ink); }
.fila__enlace:hover .icono--marca { color: var(--marca); }
@media (min-width: 760px) {
  .fila__enlace { display: grid; grid-template-columns: 230px minmax(0, 1fr) 24px; align-items: center; gap: 24px; min-height: 76px; padding: 0; }
  .fila__rotulo { gap: 10px; }
  .fila__rotulo .rotulo { font-size: 12px; }
  .fila__texto { font-size: 19px; }
  .fila__flecha { display: block; }
}

/* ------------------------------------------------------ certificaciones - */

.formacion { display: grid; gap: 24px; padding-top: 18px; border-top: 1.5px solid var(--tinta); }
.formacion__grupo { display: flex; flex-direction: column; gap: 10px; }
.formacion__lista { display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.45; }
.idioma { display: flex; flex-direction: column; }
.idioma__nombre { font-size: 18px; font-weight: 600; }
.idioma__nivel { font-size: 15px; color: var(--suave); }
@media (min-width: 760px) { .formacion { grid-template-columns: 2fr 1fr; gap: 32px; } }

/* -------------------------------------------------------------- contacto - */

.cierre { display: grid; gap: 24px; }
.cierre__texto { display: flex; flex-direction: column; gap: 16px; }
.cierre__acciones { display: flex; flex-direction: column; gap: 8px; }
.cierre__acciones .enlace-mono { justify-content: center; }
@media (min-width: 1000px) {
  .cierre { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; align-items: end; }
  .cierre__texto { grid-column: span 8; gap: 18px; }
  .cierre__acciones { grid-column: span 4; }
}

/* ------------------------------------------------------------------- pie - */

.pie { border-top: 1px solid var(--linea); padding: 20px 0; }
.pie__fila { display: flex; flex-direction: column; gap: 8px; }
.pie__firma { display: flex; align-items: center; gap: 10px; }
.pie__firma .rotulo { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; }
.pie__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.pie__enlace {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-size: 15px; font-weight: 500; color: var(--tinta-2); text-decoration: none;
}
.pie__enlace:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; }
.pie__enlace:hover .icono--marca { color: var(--marca); }
.pie__separador { display: none; }
@media (min-width: 1000px) {
  .pie__fila { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .pie__firma .rotulo { font-size: 12px; letter-spacing: 0.12em; }
  .pie__nav { display: flex; align-items: center; gap: 20px; }
  .pie__enlace { font-size: 14px; }
  .pie__separador { display: block; width: 1px; height: 18px; background: var(--linea); }
}

/* ========================================================================
   Trabaja conmigo
   ======================================================================== */

.isla { background: var(--papel-3); border: 2px solid var(--tinta); border-radius: var(--r-lg); overflow: hidden; }
.isla__cuerpo { display: flex; flex-direction: column; padding: 24px; }
.isla__precio { margin-top: 8px; font-family: var(--display); font-weight: 800; font-size: 64px; line-height: 0.95; }
.isla__lista { display: flex; flex-direction: column; gap: 12px; padding: 18px 24px; border-top: 1px solid var(--linea); }
.isla__lista li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.isla__lista .icono { color: var(--verde-ink); }
.isla__pie { padding: 14px 24px; border-top: 1px solid var(--linea); background: var(--papel-4); font-size: 14px; color: var(--tenue); }
@media (min-width: 1000px) { .isla__cuerpo { padding: 28px; } .isla__precio { font-size: 76px; } .isla__lista, .isla__pie { padding-left: 28px; padding-right: 28px; } }

.servicios { display: grid; gap: 16px; }
@media (min-width: 760px) { .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.servicio {
  display: flex; flex-direction: column; gap: 14px; padding: 24px;
  background: var(--papel-3); border: 1px solid var(--linea); border-radius: var(--r-lg);
}
.servicio__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.servicio__nombre { display: flex; align-items: center; gap: 14px; }
.servicio__titulo { font-size: 22px; font-weight: 600; line-height: 1.2; }
.servicio__precio { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--tinta-2); }
.servicio .enlace-accion { margin-top: auto; }
.servicio .logros li::before { display: none; }
.checks { display: flex; flex-direction: column; gap: 8px; }
.checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.45; }
.checks .icono { margin-top: 2px; color: var(--verde-ink); }
@media (min-width: 1000px) { .servicio { padding: 32px; } .servicio__titulo { font-size: 24px; } }

.numero {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border: 1.5px solid var(--tinta); border-radius: 50%;
  background: var(--papel); font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.numero--verde { background: var(--verde-ink); border-color: var(--verde-ink); color: #FFFFFF; }

.pasos { display: flex; flex-direction: column; gap: 12px; }
.paso { display: flex; flex-direction: column; gap: 12px; }
.paso__caja { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--papel-3); border: 1.5px solid var(--tinta); border-radius: var(--r-md); }
.paso__titulo { font-size: 19px; font-weight: 600; }
.paso__texto { font-size: 15px; line-height: 1.45; color: var(--suave); }
.paso--destacado .paso__caja { background: var(--verde-bg); border-color: var(--verde-ink); }
.paso--destacado .paso__titulo, .paso--destacado .paso__texto { color: var(--verde-hondo); }
.pasos__flecha { display: flex; justify-content: center; color: var(--verde-ink); transform: rotate(90deg); }
@media (min-width: 760px) {
  .pasos { flex-direction: row; align-items: flex-start; gap: 0; }
  .paso { flex: 1; }
  .pasos__flecha { flex: none; width: 40px; margin-top: 72px; transform: none; }
}

.casos { display: grid; gap: 16px; }
@media (min-width: 760px) { .casos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.caso { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--noche-2); border: 1px solid var(--noche-linea); border-radius: var(--r-lg); }
.caso__titulo { font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--noche-texto); }
.caso__texto { font-size: 15px; line-height: 1.5; color: var(--noche-suave); }
.caso .enlace-accion { margin-top: auto; }

.preguntas { margin-top: 24px; border-top: 1.5px solid var(--tinta); }
.pregunta { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.pregunta dt { font-size: 17px; font-weight: 600; }
.pregunta dd { font-size: 15px; line-height: 1.5; color: var(--suave); }

.formulario { display: flex; flex-direction: column; gap: 20px; padding: 22px; background: var(--papel-3); border: 1px solid var(--linea); border-radius: var(--r-lg); }
@media (min-width: 1000px) { .formulario { padding: 36px; } }
.formulario__par { display: grid; gap: 20px; }
@media (min-width: 600px) { .formulario__par { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo__etiqueta { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-2); }
.campo__entrada {
  width: 100%; min-height: 52px; padding: 12px 16px;
  background: var(--papel-3); border: 1.5px solid var(--tinta); border-radius: var(--r-md);
  font-family: var(--sans); font-size: 17px; color: var(--tinta);
}
.campo__entrada--opcional { border-color: var(--linea-fuerte); }
textarea.campo__entrada { min-height: 150px; line-height: 1.5; resize: vertical; }
.campo__entrada:focus { outline: 3px solid var(--verde-ink); outline-offset: 0; }
.campo__error { font-size: 14px; color: var(--rojo-ink); }
.campo--error .campo__entrada { background: var(--rojo-bg); border-color: var(--rojo-ink); }
.campo__ayuda { font-size: 14px; color: var(--tenue); }
.formulario__pie { display: flex; flex-direction: column; gap: 14px; }
.formulario__nota { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tenue); }
@media (min-width: 600px) { .formulario__pie { flex-direction: row; align-items: center; justify-content: space-between; } }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aviso { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); font-size: 15px; font-weight: 500; }
.aviso--exito { background: var(--verde-bg); border: 1px solid var(--verde-linea); color: var(--verde-hondo); }
.aviso--error { background: var(--rojo-bg); border: 1px solid var(--rojo-linea); color: var(--rojo-ink); }
.avisos { display: flex; flex-direction: column; gap: 8px; }

/* ------------------------------------------------------------- error 404 - */

.error-pagina { padding: 80px 0 120px; }
.error-pagina .h2 { margin: 14px 0 18px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}