/* BRICEVO — colores sacados del logo: morado profundo, violeta y el gris del arco. */
:root {
  --tinta: #1B0B3A;
  --morado: #3A0CA3;
  --violeta: #6D28D9;
  --lila: #EFE9FB;
  --gris: #A3A3AE;
  --texto: #34304A;
  --suave: #6B6880;
  --linea: #E6E1F2;
  --fondo: #FFFFFF;
  --titulo: 'Montserrat', system-ui, sans-serif;
  --cuerpo: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; font-family: var(--cuerpo); color: var(--texto); background: var(--fondo); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titulo); color: var(--tinta); margin: 0; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.ancho { width: min(1160px, 100% - 40px); margin-inline: auto; }

/* ---- Barra de arriba y cabecera ---- */
.aviso { background: var(--tinta); color: #E9E2FA; font-size: 13px; }
.aviso-fila { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; }
.aviso-fila > * { white-space: nowrap; }
.aviso a { text-decoration: none; font-weight: 600; }

.cabecera { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--linea); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
/* El logo viene con fondo gris muy claro: se aclara hasta el blanco. */
.marca img { width: 196px; filter: brightness(1.06); mix-blend-mode: multiply; }
.menu { display: flex; align-items: center; gap: 30px; font-weight: 600; font-size: 15px; }
.menu a { text-decoration: none; color: var(--tinta); }
.menu a:not(.boton):hover { color: var(--violeta); }
.menu-boton { display: none; width: 44px; height: 44px; border: 1px solid var(--linea); border-radius: 12px; background: #fff; cursor: pointer; padding: 0; }
.menu-boton span { display: block; width: 20px; height: 2px; margin: 4px auto; background: var(--tinta); border-radius: 2px; }

/* ---- Botones ---- */
.boton { display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; border-radius: 999px; font-family: var(--titulo); font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.boton:hover { transform: translateY(-2px); }
.boton-lleno { color: #fff !important; background: linear-gradient(135deg, var(--morado), var(--violeta)); box-shadow: 0 10px 24px rgba(77, 22, 180, .28); }
.boton-linea { color: var(--morado); border: 2px solid var(--morado); padding: 12px 24px; }
.boton-linea:hover { background: var(--lila); }
.boton-claro { color: var(--morado); background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.menu .boton { padding: 11px 22px; }

.rotulo { font-family: var(--titulo); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--violeta); margin-bottom: 14px; }

/* ---- Portada ----
   La foto de Manuel en la oficina ocupa todo el ancho, con el morado de la
   marca encima del lado del texto. Manuel queda a la derecha.
   Versiones anteriores: styles-v1-clara.css y styles-v2-arco.css. */
.portada { position: relative; overflow: hidden; color: #fff; background: #22084F; }
.portada::before { content: ''; position: absolute; inset: 0; background: var(--foto-portada, url('img/manuel-portada-4.webp')) 92% 14% / cover no-repeat; }
.portada::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 7, 74, .96) 0%, rgba(52, 11, 148, .88) 34%, rgba(74, 22, 180, .42) 56%, rgba(74, 22, 180, 0) 76%); }
.portada-fila { position: relative; z-index: 1; display: grid; align-items: center; min-height: clamp(520px, 46vw, 700px); }
.portada-fila > * { min-width: 0; }
.portada-texto { padding: 72px 0 80px; max-width: 600px; }
.portada .rotulo { color: #CDBBFF; }
.portada h1 { overflow-wrap: anywhere; color: #fff; font-weight: 800; font-size: clamp(27px, 3.6vw + 12px, 58px); line-height: 1.1; letter-spacing: -.01em; }
.portada h1 em { font-style: normal; font-weight: 500; color: #E3D8FF; display: block; }
.entrada { margin-top: 22px; max-width: 50ch; font-size: 18px; color: #EAE3FB; }
.botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.portada .boton-linea { color: #fff; border-color: rgba(255,255,255,.7); }
.portada .boton-linea:hover { background: rgba(255,255,255,.12); }
.idiomas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.idiomas li { padding: 7px 16px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); color: #fff; font-weight: 600; font-size: 14px; }

/* Los arcos del logo, de adorno (solo en la llamada final). */
.arco { position: absolute; border-radius: 50%; pointer-events: none; }
.arco-3 { width: 700px; height: 700px; right: -300px; top: -420px; border: 22px solid rgba(255,255,255,.14); }

/* En celular el texto va arriba, sobre el morado, y la foto debajo. */
@media (max-width: 760px) {
  .portada { padding-bottom: 66vw; }
  .portada::before { top: auto; height: 66vw; background-position: 92% 14%; }
  .portada::after { background: linear-gradient(180deg, #22084F 0%, #3A0CA3 calc(100% - 66vw), rgba(58, 12, 163, 0) calc(100% - 44vw)); }
  .portada-fila { min-height: 0; }
  .portada-texto { padding: 48px 0 36px; }
}

/* ---- Cinta ---- */
.cinta { background: linear-gradient(90deg, var(--tinta), var(--morado) 55%, var(--violeta)); color: #fff; }
.cinta-fila { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 40px; padding: 22px 0; font-family: var(--titulo); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 15px; }

/* ---- Bloques ---- */
.bloque { padding: 92px 0; }
.bloque h2 { font-weight: 800; font-size: clamp(27px, 3.4vw, 40px); line-height: 1.15; max-width: 22ch; }
.bajada { margin-top: 16px; max-width: 60ch; font-size: 17px; color: var(--suave); }
.bloque-tinte { background: #FAF8FF; border-block: 1px solid var(--linea); }
.dos { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.dos-centro { align-items: center; }
.prosa { display: grid; gap: 16px; font-size: 17px; }
.destacado { font-family: var(--titulo); font-weight: 700; font-size: 20px; color: var(--morado); }
.enlace { justify-self: start; font-family: var(--titulo); font-weight: 700; color: var(--violeta); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }

/* ---- Servicios ---- */
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.tarjeta { padding: 28px 26px; border: 1px solid var(--linea); border-radius: 20px; background: #fff; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.tarjeta:hover { transform: translateY(-4px); border-color: #CDBDF3; box-shadow: 0 18px 40px rgba(58, 12, 163, .12); }
.tarjeta h3 { font-weight: 700; font-size: 18px; line-height: 1.3; margin: 18px 0 8px; }
.tarjeta p { font-size: 15px; color: var(--suave); }
.icono { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--lila); }
.icono svg { width: 26px; height: 26px; fill: none; stroke: var(--morado); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.canales { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 30px; padding: 22px 26px; border-radius: 20px; background: var(--lila); }
.canales b { font-family: var(--titulo); color: var(--tinta); }
.canales ul { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.canales li { padding: 6px 14px; border-radius: 999px; background: #fff; color: var(--morado); font-weight: 600; font-size: 14px; }

/* ---- Valores ---- */
.valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 44px; border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.valor { padding: 28px 26px 30px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.valor span { font-family: var(--titulo); font-weight: 800; font-size: 14px; color: var(--gris); }
.valor h3 { font-weight: 800; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; color: var(--morado); margin: 8px 0; }
.valor p { font-size: 15px; color: var(--suave); }

/* ---- Careers ---- */
.bloque-oscuro { background: var(--tinta); color: #D9D0F0; }
.bloque-oscuro h2 { color: #fff; }
.bloque-oscuro .rotulo { color: #B79BFF; }
.bloque-oscuro .bajada { color: #C9BFE6; margin-bottom: 28px; }
.areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.areas li { padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); font-family: var(--titulo); font-weight: 700; color: #fff; }

/* ---- Llamada final ---- */
.llamada { position: relative; overflow: hidden; padding: 96px 0; background: linear-gradient(120deg, var(--morado), var(--violeta)); color: #F1EBFF; text-align: center; }
.llamada-caja { position: relative; display: grid; justify-items: center; gap: 20px; }
.llamada h2 { color: #fff; font-weight: 900; font-size: clamp(28px, 4vw, 46px); line-height: 1.1; text-transform: uppercase; max-width: 20ch; }
.llamada p { max-width: 58ch; font-size: 18px; }

/* ---- Pie ---- */
.pie { background: #fff; border-top: 1px solid var(--linea); font-size: 15px; }
.pie-fila { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding: 56px 0 36px; }
.pie-logo { width: 190px; filter: brightness(1.06); mix-blend-mode: multiply; margin-bottom: 12px; }
.pie nav, .pie-fila > div:last-child { display: grid; gap: 8px; align-content: start; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--violeta); }
.pie b { font-family: var(--titulo); color: var(--tinta); }
.pie-base { padding: 18px 0 28px; border-top: 1px solid var(--linea); color: var(--suave); font-size: 13.5px; }

/* ---- Celular y tableta ---- */
@media (max-width: 980px) {
  .tarjetas, .valores { grid-template-columns: repeat(2, 1fr); }
  .dos { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .menu-boton { display: block; }
  .menu { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px 20px; background: #fff; border-bottom: 1px solid var(--linea); box-shadow: 0 20px 30px rgba(27, 11, 58, .1); }
  .menu.abierto { display: flex; }
  .menu a:not(.boton) { padding: 14px 4px; border-bottom: 1px solid var(--linea); }
  .menu .boton { margin-top: 16px; }
  .marca img { width: 150px; }
  .bloque { padding: 64px 0; }
  .pie-fila { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  .tarjetas, .valores, .areas { grid-template-columns: 1fr; }
  .aviso-fila { font-size: 11.5px; gap: 10px; }
  .botones .boton { width: 100%; }
  .cinta-fila { flex-direction: column; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .estrella { animation: none; }
  .boton, .tarjeta { transition: none; }
}

/* ================= Páginas interiores ================= */
.menu a[aria-current="page"]:not(.boton) { color: var(--violeta); box-shadow: 0 2px 0 var(--violeta); }

/* El rótulo morado con que abre cada página. */
.encabezado { position: relative; overflow: hidden; padding: 76px 0 80px; color: #fff; background: linear-gradient(115deg, #22084F 0%, var(--morado) 55%, var(--violeta) 100%); }
.encabezado .ancho { position: relative; }
.encabezado .rotulo { color: #CDBBFF; }
.encabezado h1 { color: #fff; font-weight: 800; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.1; max-width: 20ch; }
.encabezado .entrada { max-width: 60ch; }

.estrecho { width: min(820px, 100% - 40px); }
.bloque h2 + .formulario, .bloque h2 + .valores { margin-top: 32px; }

/* Lo que apoya cada servicio, plegado para no alargar la tarjeta. */
.tarjeta details { margin-top: 14px; border-top: 1px solid var(--linea); padding-top: 12px; }
.tarjeta summary { cursor: pointer; font-family: var(--titulo); font-weight: 700; font-size: 13.5px; color: var(--violeta); list-style: none; }
.tarjeta summary::-webkit-details-marker { display: none; }
.tarjeta summary::after { content: ' +'; }
.tarjeta details[open] summary::after { content: ' –'; }
.tarjeta details ul { margin-top: 10px; display: grid; gap: 6px; font-size: 14.5px; color: var(--suave); }
.tarjeta details li { padding-left: 16px; position: relative; }
.tarjeta details li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--violeta); }

/* Liderazgo y seguridad, lado a lado. */
.pareja { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.panel { padding: 34px 32px; border-radius: 22px; border: 1px solid var(--linea); background: #fff; }
.panel h3 { font-weight: 800; font-size: 21px; margin: 18px 0 10px; }
.panel p { color: var(--suave); }

.cierre { text-align: center; }
.cierre h2 { margin-inline: auto; max-width: 24ch; }
.cierre p { color: #C9BFE6; margin-bottom: 14px; font-size: 17px; }
.cierre .firma { margin: 22px 0 0; font-family: var(--titulo); font-weight: 700; letter-spacing: .06em; color: #B79BFF; }

/* Recursos que todavía no tienen contenido. */
.tarjeta-recurso { display: grid; justify-items: start; }
.pronto { display: inline-block; margin-top: 6px; padding: 5px 12px; border-radius: 999px; background: var(--lila); color: var(--morado); font-family: var(--titulo); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

/* ---- Formularios ---- */
.formulario { padding: 34px 32px; border-radius: 22px; border: 1px solid var(--linea); background: #fff; box-shadow: 0 20px 50px rgba(58, 12, 163, .08); }
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin-bottom: 26px; }
.campo { display: grid; gap: 7px; min-width: 0; border: 0; padding: 0; margin: 0; }
.campo-ancho { grid-column: 1 / -1; }
.campo > span, .campo legend { font-family: var(--titulo); font-weight: 700; font-size: 14px; color: var(--tinta); padding: 0; }
.campo legend { margin-bottom: 9px; }
.campo input:not([type="checkbox"]):not([type="radio"]), .campo select, .campo textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid #D5CCE9; background: #FCFBFF; color: var(--texto); font: inherit; font-size: 16px;
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--violeta); box-shadow: 0 0 0 3px rgba(109, 40, 217, .18); }
.campo small { font-size: 13px; color: var(--suave); }
.chips { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid #D5CCE9; background: #fff; font-weight: 600; font-size: 14.5px; color: var(--texto); transition: background .15s ease, border-color .15s ease, color .15s ease; }
.chips input:checked + span { background: var(--morado); border-color: var(--morado); color: #fff; }
.chips input:focus-visible + span { box-shadow: 0 0 0 3px rgba(109, 40, 217, .3); }
.formulario .boton { border: 0; cursor: pointer; }
.nota-envio { margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: #FFF6E5; border: 1px solid #F1D9A6; color: #6B4A00; font-size: 14.5px; }

.datos { display: grid; gap: 14px; margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--linea); }
.datos li { display: grid; gap: 2px; }
.datos b { font-family: var(--titulo); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--violeta); }
.datos a { font-family: var(--titulo); font-weight: 800; font-size: 22px; color: var(--tinta); text-decoration: none; }

@media (max-width: 760px) {
  .encabezado { padding: 52px 0 56px; }
  .pareja, .rejilla { grid-template-columns: 1fr; }
  .formulario { padding: 24px 20px; }
  .menu a[aria-current="page"]:not(.boton) { box-shadow: none; }
}

/* La portada entra al cargar: cada renglón sube y aparece, uno tras otro.
   Quien pide menos movimiento en su equipo lo ve fijo desde el principio. */
@keyframes entrar { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes asomar { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.portada-texto > * { animation: entrar .7s cubic-bezier(.2, .7, .2, 1) both; }
.portada-texto > :nth-child(1) { animation-delay: .10s; }
.portada-texto > :nth-child(2) { animation-delay: .22s; }
.portada-texto > :nth-child(3) { animation-delay: .40s; }
.portada-texto > :nth-child(4) { animation-delay: .55s; }
.portada-texto > :nth-child(5) { animation-delay: .70s; }
.portada h1 em { animation: entrar .7s cubic-bezier(.2, .7, .2, 1) .45s both; }
.portada::before { animation: asomar 1.1s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .portada-texto > *, .portada h1 em, .portada::before { animation: none; }
}

/* ---- Selector de idioma ----
   Un círculo en la cabecera. Al pasar el ratón (o pulsarlo) salen tres rayas
   desde el centro y en la punta de cada una, un idioma. En escritorio va
   entre el menú y el botón de contacto, para que el abanico tenga sitio a
   los dos lados. */
.idioma { position: relative; flex: none; }
.idioma-boton { position: relative; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1.5px solid var(--linea); background: #fff; color: var(--morado); cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.idioma-boton svg { width: 22px; height: 22px; }
.idioma-sigla { position: absolute; right: -7px; bottom: -5px; min-width: 24px; padding: 2px 4px; border-radius: 999px; border: 2px solid #fff; background: var(--morado); color: #fff; font: 800 9.5px/1.2 var(--titulo); letter-spacing: .04em; text-align: center; }
.idioma-rama { position: absolute; z-index: 1; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.idioma-rama i { position: absolute; left: 0; top: -1px; width: var(--largo); height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--violeta), #B79CF5); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); transform-origin: 0 50%; transform: rotate(var(--giro)) scaleX(0); transition: transform .26s ease; }
.idioma-opcion { position: absolute; left: 0; top: 0; padding: 8px 15px; border-radius: 999px; border: 1.5px solid var(--linea); background: #fff; color: var(--morado); font: 700 13.5px/1.2 var(--titulo); white-space: nowrap; cursor: pointer; box-shadow: 0 10px 24px rgba(27, 11, 58, .2); opacity: 0; transform: translate(-50%, -50%) scale(.3); transition: transform .32s cubic-bezier(.2, .9, .3, 1.25), opacity .18s ease, background .18s ease; }
.idioma-opcion:hover { background: var(--lila); }
.idioma-opcion[aria-pressed="true"] { border-color: transparent; background: linear-gradient(135deg, var(--morado), var(--violeta)); color: #fff; }
.rama-1 { --x: -92px; --y: 70px; --largo: 116px; --giro: 142.7deg; }
.rama-2 { --x: 0px; --y: 112px; --largo: 112px; --giro: 90deg; }
.rama-3 { --x: 92px; --y: 70px; --largo: 116px; --giro: 37.3deg; }
.rama-2 i, .rama-2 .idioma-opcion { transition-delay: .05s; }
.rama-3 i, .rama-3 .idioma-opcion { transition-delay: .1s; }

.idioma.abierto .idioma-boton { border-color: var(--violeta); box-shadow: 0 0 0 5px rgba(109, 40, 217, .14); }
.idioma.abierto .idioma-rama { pointer-events: auto; }
.idioma.abierto .idioma-rama i { transform: rotate(var(--giro)) scaleX(1); }
.idioma.abierto .idioma-opcion { opacity: 1; transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)) scale(1); }
/* Zona invisible debajo del círculo: sin ella, al bajar el ratón hacia un
   idioma se saldría del círculo y el abanico se cerraría. */
.idioma.abierto::after { content: ''; position: absolute; z-index: 0; left: 50%; top: 50%; width: 300px; height: 150px; transform: translateX(-50%); }
@media (hover: hover) {
  .idioma:hover .idioma-boton { border-color: var(--violeta); box-shadow: 0 0 0 5px rgba(109, 40, 217, .14); }
  .idioma:hover .idioma-rama { pointer-events: auto; }
  .idioma:hover .idioma-rama i { transform: rotate(var(--giro)) scaleX(1); }
  .idioma:hover .idioma-opcion { opacity: 1; transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)) scale(1); }
  .idioma:hover::after { content: ''; position: absolute; z-index: 0; left: 50%; top: 50%; width: 300px; height: 150px; transform: translateX(-50%); }
}

@media (min-width: 761px) {
  .cabecera-fila { justify-content: flex-start; gap: 30px; }
  .marca { margin-right: auto; }
  .cabecera-fila .menu { display: contents; }
  .menu a:not(.boton) { order: 1; }
  .idioma { order: 2; }
  .menu .boton { order: 3; }
}
@media (max-width: 760px) {
  .cabecera-fila { gap: 14px; }
  .idioma { margin-left: auto; }
  .rama-1 { --x: -78px; --y: 66px; --largo: 102px; --giro: 139.8deg; }
  .rama-2 { --x: -4px; --y: 112px; --largo: 112px; --giro: 92deg; }
  .rama-3 { --x: 60px; --y: 66px; --largo: 89px; --giro: 47.7deg; }
  .idioma-opcion { padding: 7px 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .idioma-rama i, .idioma-opcion { transition: none; }
}

/* ---- Formularios conectados ---- */
/* Casilla trampa para robots: fuera de la vista y del teclado. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nota-envio.nota-bien { background: #EAF7EE; border-color: #B7E0C2; color: #14532D; }
.formulario button[disabled] { opacity: .6; cursor: progress; }

/* El candado del pie: la entrada al panel. Discreto a propósito; quien no
   lo busca no lo nota. La seguridad no depende de esconderlo: el panel
   pide contraseña. */
.pie-base { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.candado { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--suave); opacity: .45; transition: opacity .2s ease, background .2s ease, color .2s ease; }
.candado svg { width: 16px; height: 16px; }
.candado:hover, .candado:focus-visible { opacity: 1; color: var(--morado); background: var(--lila); }

/* ---- Revisión de diseño (v7) ----
   Lo que salió de la revisión: menos bloques oscuros seguidos, la foto a la
   vista, servicios con jerarquía y textos con más contraste.
   Lo de antes quedó en styles-v6-antes-revision.css. */

/* Textos de lectura más oscuros: el gris anterior se quedaba corto. */
:root { --suave: #55516B; }
.bajada { color: var(--texto); }

/* Portada clara: el blanco cubre solo el lado del texto y se desvanece
   pronto, para que la oficina y Manuel se vean como son. */
.portada { color: var(--texto); background: #F4F1FA; }
.portada::after { background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .97) 30%, rgba(255, 255, 255, .72) 46%, rgba(255, 255, 255, 0) 64%); }
.portada .rotulo { color: var(--violeta); }
.portada h1 { color: var(--tinta); }
.portada h1 em { color: var(--violeta); font-weight: 600; }
.portada .entrada { color: var(--texto); }
.portada .boton-claro { color: #fff; background: linear-gradient(135deg, var(--morado), var(--violeta)); box-shadow: 0 10px 24px rgba(77, 22, 180, .25); }
.portada .boton-linea { color: var(--morado); border-color: var(--morado); }
.portada .boton-linea:hover { background: var(--lila); }
.idiomas li { background: #fff; border-color: var(--linea); color: var(--morado); box-shadow: 0 2px 8px rgba(27, 11, 58, .06); }
@media (max-width: 760px) {
  .portada::after { background: linear-gradient(180deg, #fff 0%, #fff calc(100% - 66vw), rgba(255, 255, 255, 0) calc(100% - 46vw)); }
}

/* La cinta deja de ser otro bloque morado: letras moradas sobre blanco. */
.cinta { background: #fff; color: var(--morado); border-block: 1px solid var(--linea); }

/* Careers pasa a claro: debajo viene el cierre morado y dos bloques
   oscuros seguidos pesaban. Solo el de la portada (el que lleva las áreas):
   Why BRICEVO y Resources usan el bloque oscuro para su cierre y siguen igual. */
.bloque-oscuro:has(.areas) { background: #fff; color: var(--texto); }
.bloque-oscuro:has(.areas) h2 { color: var(--tinta); }
.bloque-oscuro:has(.areas) .rotulo { color: var(--violeta); }
.bloque-oscuro:has(.areas) .bajada { color: var(--texto); }
.bloque-oscuro:has(.areas) .boton-claro { color: #fff; background: linear-gradient(135deg, var(--morado), var(--violeta)); box-shadow: 0 10px 24px rgba(77, 22, 180, .25); }
.bloque-oscuro:has(.areas) .areas li { background: var(--lila); border-color: transparent; color: var(--morado); }

/* El menú nunca parte una opción en dos renglones; en pantallas medianas
   se aprieta un poco para que quepa todo en una línea. */
.menu a { white-space: nowrap; }
@media (min-width: 761px) and (max-width: 1080px) {
  .cabecera-fila { gap: 18px; }
  .marca img { width: 160px; }
  .menu { font-size: 14px; }
  .menu .boton { padding: 10px 16px; }
}

/* ---- Morado solo donde manda (v8) ----
   El morado fuerte queda para tres cosas: el logo, "Contact Us" y los
   botones de "Start a conversation" (y el de enviar de cada formulario).
   Todo lo demás pasa a blanco y lila suave.
   Lo de antes quedó en styles-v7-antes-lila.css. */
:root { --lila-suave: #F6F2FF; }

/* Servicios sobre lila suave; las tarjetas blancas resaltan encima. */
#services { background: var(--lila-suave); border-block: 1px solid var(--linea); }
#services + .bloque-tinte { background: #fff; border: 0; }
.cinta { border-bottom: 0; }

/* Franja del horario: clara. */
.aviso { background: #fff; color: var(--suave); border-bottom: 1px solid var(--linea); }
.aviso a { color: var(--tinta); }

/* Cabeceras de las páginas interiores: lila suave con letra oscura. */
.encabezado { color: var(--texto); background: var(--lila-suave); border-bottom: 1px solid var(--linea); }
.encabezado .rotulo { color: var(--violeta); }
.encabezado h1 { color: var(--tinta); }
.arco-3 { border-color: rgba(109, 40, 217, .08); }

/* Bloques de cierre que eran oscuros (Why BRICEVO, Resources). */
.bloque-oscuro { background: #fff; color: var(--texto); }
.bloque-oscuro h2 { color: var(--tinta); }
.bloque-oscuro .rotulo { color: var(--violeta); }
.bloque-oscuro .bajada, .cierre p { color: var(--texto); }
.cierre .firma { color: var(--violeta); }

/* La llamada final: lila suave, y el morado solo en su botón. */
.llamada { background: var(--lila-suave); color: var(--texto); border-top: 1px solid var(--linea); }
.llamada h2 { color: var(--tinta); }
.boton-claro { color: #fff; background: linear-gradient(135deg, var(--morado), var(--violeta)); box-shadow: 0 10px 24px rgba(77, 22, 180, .22); }

/* "Apply" no es de los botones fuertes: va con borde. */
.bloque-oscuro:has(.areas) .boton-claro { color: var(--morado); background: transparent; border: 2px solid var(--morado); padding: 12px 24px; box-shadow: none; }
.bloque-oscuro:has(.areas) .boton-claro:hover { background: var(--lila); }
.bloque-oscuro:has(.areas) { border-top: 1px solid var(--linea); }

/* Selector de idioma sin rellenos morados. */
.idioma-sigla { background: var(--lila); color: var(--morado); }
.idioma-opcion[aria-pressed="true"] { border-color: var(--violeta); background: var(--lila); color: var(--morado); }
.encabezado .entrada { color: var(--texto); }

/* ---- Equilibrio con negro y blanco (v11) ----
   Para que el morado no se repita en cada cosa, lo secundario de la
   portada pasa a negro suave: la cinta, las pastillas de idioma y el
   segundo botón. El morado se queda en el título pequeño, en
   "possibilities start." y en "Start a conversation". */
:root { --negro: #1C1A22; }
.cinta { color: var(--negro); }
.idiomas li { color: var(--negro); }
.portada .boton-linea { color: var(--negro); border-color: var(--negro); }
.portada .boton-linea:hover { background: rgba(28, 26, 34, .06); }

/* Los títulos pequeños de cada sección ("What we do", "Who we are",
   "Careers"…) también en negro. El de la portada sigue en violeta. */
.rotulo, .encabezado .rotulo, .bloque-oscuro .rotulo, .bloque-oscuro:has(.areas) .rotulo { color: var(--negro); }
.portada .rotulo { color: var(--violeta); }

/* ---- Careers al estilo de la referencia ----
   Dos columnas sobre morado: a la izquierda Manuel (recortado) con el
   mensaje, a la derecha el formulario con casillas redondeadas y el nombre
   de cada casilla dentro. En celular va uno debajo del otro. */
.aplicar { position: relative; overflow: hidden; padding: 64px 0 88px; color: #F1EBFF; background: linear-gradient(165deg, #4A1FB8 0%, #3A0CA3 45%, #2B0A78 100%); }
.aplicar-fila { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 64px; align-items: start; }
.aplicar-lado { position: sticky; top: 104px; display: grid; justify-items: start; }
/* La forma blanca detrás de la cabeza, como un brochazo. */
.aplicar-lado::before { content: ''; position: absolute; left: 4%; top: 30px; width: 86%; height: 190px; background: #fff; border-radius: 120px 120px 120px 26px; transform: skewX(-8deg); }
.aplicar-figura { position: relative; width: min(330px, 82%); height: auto; margin-left: 9%; -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 96%); mask-image: linear-gradient(180deg, #000 58%, transparent 96%); }
.aplicar-texto { position: relative; margin-top: -150px; }
.aplicar .rotulo { color: #CDBBFF; }
.aplicar h1 { color: #fff; font-weight: 800; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; }
.aplicar .entrada { margin-top: 16px; color: #E7DEFF; font-size: 17px; }
.aplicar h2 { color: #fff; font-weight: 800; font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 26px; }

.aplicar .formulario { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.aplicar .rejilla { gap: 16px 18px; }
.aplicar .campo { position: relative; }
.aplicar .campo > span, .aplicar .campo legend { color: #fff; }
.aplicar .campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .aplicar .campo select, .aplicar .campo textarea { border: 1.5px solid #8F73F2; border-radius: 16px; background: rgba(27, 11, 58, .42); color: #fff; }
.aplicar .campo input::placeholder, .aplicar .campo textarea::placeholder { color: rgba(255, 255, 255, .5); }
.aplicar .campo input:focus, .aplicar .campo select:focus, .aplicar .campo textarea:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); }
.aplicar .campo input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: 0 0 0 1000px #33108F inset; caret-color: #fff; }
/* El nombre de la casilla va dentro, arriba a la izquierda. */
.aplicar label.campo:not(.campo-ancho) { gap: 0; }
.aplicar label.campo:not(.campo-ancho) > span { position: absolute; z-index: 1; left: 19px; top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #CDBBFF; pointer-events: none; }
.aplicar label.campo:not(.campo-ancho) > input { padding: 28px 18px 11px !important; }
.aplicar .campo small { color: #CDBBFF; }
.aplicar .campo input[type="file"] { color: #E7DEFF; font-size: 14.5px; }
.aplicar .campo input[type="file"]::file-selector-button { margin-right: 14px; padding: 10px 18px; border: 0; border-radius: 999px; background: #fff; color: var(--morado); font-family: var(--titulo); font-weight: 700; cursor: pointer; }
.aplicar .chips span { border-color: #8F73F2; background: rgba(27, 11, 58, .30); color: #fff; }
.aplicar .chips input:checked + span { background: #fff; border-color: #fff; color: var(--morado); }
.aplicar .chips input:focus-visible + span { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.aplicar .formulario .boton-lleno { width: 100%; padding: 17px 26px; font-size: 16px; color: var(--morado) !important; background: #fff; box-shadow: 0 14px 30px rgba(12, 3, 44, .35); }
.aplicar .formulario .boton-lleno:hover { background: #F1EBFF; }

@media (max-width: 900px) {
  .aplicar { padding: 40px 0 64px; }
  .aplicar-fila { grid-template-columns: 1fr; gap: 40px; }
  .aplicar-lado { position: static; }
  .aplicar-lado::before { height: 150px; }
  .aplicar-figura { width: min(250px, 66%); }
  .aplicar-texto { margin-top: -110px; }
}
.aplicar-lado::before { width: min(390px, 86%); }
.aplicar-figura { margin-left: min(9%, 40px); }
/* En escritorio la figura se ajusta al alto de la pantalla para que el
   mensaje de la izquierda se vea entero sin bajar. */
@media (min-width: 901px) {
  .aplicar-figura { width: auto; height: min(500px, 54vh); }
  .aplicar-lado::before { width: min(330px, 80%); height: 150px; }
  .aplicar-texto { margin-top: -120px; }
}

/* Careers sin la figura de Manuel: a la izquierda queda solo el mensaje. */
.aplicar-lado::before { content: none; }
.aplicar-texto { margin-top: 0 !important; }
@media (min-width: 901px) { .aplicar-lado { padding-top: 62px; } }

/* ---- Selector de archivo propio ----
   El del navegador escribe su botón en el idioma del equipo del visitante.
   Este lleva nuestro texto; el del navegador queda encima, invisible, para
   que el clic, el teclado y el arrastrar un archivo sigan funcionando. */
.campo > .archivo { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border: 1.5px dashed #CFC4EA; border-radius: 14px; background: #FBFAFF; font-family: var(--cuerpo); font-weight: 400; font-size: 14.5px; color: var(--suave); cursor: pointer; }
.campo .archivo input[type="file"] { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0; padding: 0 !important; border: 0 !important; opacity: 0; cursor: pointer; }
.archivo-boton { padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--morado); color: var(--morado); font-family: var(--titulo); font-weight: 700; font-size: 14px; }
.archivo-elegido { color: var(--tinta); font-weight: 600; overflow-wrap: anywhere; }
.archivo:focus-within { border-color: var(--violeta); box-shadow: 0 0 0 3px rgba(109, 40, 217, .18); }
.aplicar .campo > .archivo { border-color: #8F73F2; background: rgba(27, 11, 58, .42); color: #D9CCFF; }
.aplicar .archivo-boton { border-color: #fff; background: #fff; }
.aplicar .archivo-elegido { color: #fff; }
.aplicar .archivo:focus-within { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); }

/* ---- Pastillas de idioma con los colores de su bandera ----
   Al pasar el cursor (o al tocarlas) cada pastilla se llena con los colores
   oficiales: Estados Unidos para el inglés, España para el español y Haití
   para el creole. La bandera va en una capa aparte para que aparezca
   poco a poco. */
.idiomas li { position: relative; overflow: hidden; isolation: isolate; cursor: default; transition: color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease, text-shadow .25s ease; }
.idiomas li::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .25s ease; }
.idiomas li:nth-child(1)::before { background: linear-gradient(100deg, #3C3B6E 0 43%, #fff 43% 48%, #B22234 48% 100%); }
.idiomas li:nth-child(2)::before { background: linear-gradient(180deg, #AA151B 0 25%, #F1BF00 25% 75%, #AA151B 75% 100%); }
.idiomas li:nth-child(3)::before { background: linear-gradient(180deg, #00209F 0 50%, #D21034 50% 100%); }
.idiomas li:hover, .idiomas li:active { color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(27, 11, 58, .18); text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.idiomas li:hover::before, .idiomas li:active::before { opacity: 1; }
.idiomas li:nth-child(2):hover, .idiomas li:nth-child(2):active { color: #1C1A22; text-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .idiomas li, .idiomas li::before { transition: none; }
  .idiomas li:hover { transform: none; }
}

/* La del inglés, como la de Estados Unidos de verdad: siete barras rojas y
   blancas y el recuadro azul con estrellas arriba a la izquierda. Con solo
   azul, blanco y rojo en bloques se confundía con la dominicana. El texto
   lleva un borde azul para leerse sobre las barras. */
.idiomas li:nth-child(1)::before { background: repeating-linear-gradient(180deg, #B22234 0 14.2857%, #fff 14.2857% 28.5714%); }
.idiomas li:nth-child(1)::after { content: ''; position: absolute; left: 0; top: 0; z-index: -1; width: 40%; height: 57.2%; background: radial-gradient(circle, #fff 0 .9px, transparent 1.3px) 1px 1px / 6px 5px, #3C3B6E; opacity: 0; transition: opacity .25s ease; }
.idiomas li:nth-child(1):hover::after, .idiomas li:nth-child(1):active::after { opacity: 1; }
.idiomas li:nth-child(1):hover, .idiomas li:nth-child(1):active { text-shadow: 1px 0 0 #2A2958, -1px 0 0 #2A2958, 0 1px 0 #2A2958, 0 -1px 0 #2A2958, 1px 1px 0 #2A2958, -1px -1px 0 #2A2958, 1px -1px 0 #2A2958, -1px 1px 0 #2A2958, 0 0 5px #2A2958; }
@media (prefers-reduced-motion: reduce) { .idiomas li:nth-child(1)::after { transition: none; } }

/* ---- Paso suave de una página a otra ----
   Al cambiar de página, la que se va se desvanece y la nueva aparece
   subiendo un poco. La cabecera se queda quieta: es la misma en todas.
   En los navegadores que aún no lo permiten (Firefox), el contenido
   simplemente aparece con un fundido. */
@view-transition { navigation: auto; }
.cabecera { view-transition-name: cabecera; }
::view-transition-old(root) { animation: pagina-sale .2s ease both; }
::view-transition-new(root) { animation: pagina-entra .38s ease both; }
::view-transition-group(cabecera) { animation-duration: .01s; }
@keyframes pagina-sale { to { opacity: 0; } }
@keyframes pagina-entra { from { opacity: 0; transform: translateY(10px); } }
@keyframes pagina-aparece { from { opacity: 0; } }
@supports not (view-transition-name: none) {
  main { animation: pagina-aparece .35s ease both; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  main { animation: none; }
}

/* ---- La cinta se enciende ----
   Una luz recorre las letras de cada frase, una tras otra: primero "One
   team.", luego "Multiple languages." y al final "Real-world communication.".
   Cada frase se enciende letra a letra, se queda brillando un instante y
   vuelve a negro mientras la luz pasa a la siguiente. */
.cinta-fila span { color: transparent; background: linear-gradient(100deg, var(--negro) 0 42%, #5B21B6 47%, #A78BFA 50%, #5B21B6 53%, var(--negro) 58% 100%) 100% 0 / 320% 100% no-repeat; -webkit-background-clip: text; background-clip: text; animation: cinta-luz 7.5s linear infinite; }
.cinta-fila span:nth-child(2) { animation-delay: 2.5s; }
.cinta-fila span:nth-child(3) { animation-delay: 5s; }
@keyframes cinta-luz {
  0% { background-position: 100% 0; filter: drop-shadow(0 0 0 rgba(124, 58, 237, 0)); }
  14% { filter: drop-shadow(0 0 7px rgba(124, 58, 237, .55)); }
  30% { background-position: 0 0; filter: drop-shadow(0 0 0 rgba(124, 58, 237, 0)); }
  100% { background-position: 0 0; filter: drop-shadow(0 0 0 rgba(124, 58, 237, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .cinta-fila span { animation: none; color: var(--negro); background: none; }
}

/* ---- El rótulo de la portada, en negro y con la misma luz ----
   En la portada lo único que va en morado es "possibilities start.". El
   rótulo de arriba pasa a negro y lo recorre la luz de la cinta, cada
   pocos segundos, después de su entrada. */
.portada .rotulo { width: fit-content; color: transparent; background: linear-gradient(100deg, var(--negro) 0 42%, #5B21B6 47%, #A78BFA 50%, #5B21B6 53%, var(--negro) 58% 100%) 100% 0 / 320% 100% no-repeat; -webkit-background-clip: text; background-clip: text; animation: entrar .7s cubic-bezier(.2, .7, .2, 1) .10s both, cinta-luz 7.5s linear 1.3s infinite; }
@media (prefers-reduced-motion: reduce) {
  .portada .rotulo { animation: none; color: var(--negro); background: none; }
}

/* ---- Servicios: fondo neutro y un color por servicio ----
   El fondo lila, los iconos morados y los enlaces morados juntos cargaban
   la sección. El fondo pasa a gris muy claro, cada servicio toma un color
   propio y "We support" pasa a negro. Los iconos se dibujan al entrar en
   pantalla y se vuelven a dibujar al pasar el cursor por la tarjeta. */
#services { background: #F6F6F8; }
#services .tarjeta { --c: var(--morado); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
#services .icono { background: color-mix(in srgb, var(--c) 11%, #fff); transition: transform .35s cubic-bezier(.2, .7, .2, 1.4), background-color .25s ease; }
#services .icono svg { stroke: var(--c); }
#services .icono svg * { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease; }
.con-js #services .tarjeta:not(.visto) .icono svg * { stroke-dashoffset: 1; }
#services .tarjeta:nth-child(3n+2) .icono svg * { transition-delay: .12s; }
#services .tarjeta:nth-child(3n) .icono svg * { transition-delay: .24s; }
#services .tarjeta:hover { border-color: color-mix(in srgb, var(--c) 45%, #fff); box-shadow: 0 14px 30px rgba(28, 26, 34, .08); transform: translateY(-3px); }
#services .tarjeta:hover .icono { transform: translateY(-3px) rotate(-6deg) scale(1.08); background: color-mix(in srgb, var(--c) 18%, #fff); }
#services .tarjeta:hover .icono svg * { animation: icono-dibuja .9s ease both; }
@keyframes icono-dibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
#services .tarjeta summary { color: var(--negro); }
#services .tarjeta details li::before { background: var(--c); }
@media (prefers-reduced-motion: reduce) {
  #services .icono, #services .icono svg *, #services .tarjeta { transition: none; }
  .con-js #services .tarjeta:not(.visto) .icono svg * { stroke-dashoffset: 0; }
  #services .tarjeta:hover { transform: none; }
  #services .tarjeta:hover .icono { transform: none; }
  #services .tarjeta:hover .icono svg * { animation: none; }
}

/* ---- Menos morado en todo el sitio ----
   Lo mismo que en los servicios, llevado a las demás páginas. Los fondos
   lila pasan a gris muy claro, los textos y bordes morados a negro, y cada
   icono o valor toma un color propio. El morado queda para el logo, los
   botones principales, "possibilities start." y la página de Careers. */
:root { --lila-suave: #F6F6F8; --linea: #E6E6EB; }
.bloque-tinte { background: #FAFAFB; }
.destacado, .enlace, .datos b, .cierre .firma { color: var(--negro); }
.boton-linea, .bloque-oscuro:has(.areas) .boton-claro { color: var(--negro); border-color: var(--negro); }
.boton-linea:hover, .bloque-oscuro:has(.areas) .boton-claro:hover { background: #F0F0F3; }
.canales { background: #fff; border: 1px solid var(--linea); }
.canales li { background: #F6F6F8; color: var(--negro); }
.bloque-oscuro:has(.areas) .areas li { background: #F0F0F3; color: var(--negro); }
.pronto { background: #F0F0F3; color: var(--negro); }

/* Recursos y paneles (Leadership, Security): color propio e icono que se
   dibuja, igual que las tarjetas de servicios. */
.tarjeta-recurso, .panel { --c: var(--morado); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
:is(.tarjeta-recurso, .panel) .icono { background: color-mix(in srgb, var(--c) 11%, #fff); transition: transform .35s cubic-bezier(.2, .7, .2, 1.4), background-color .25s ease; }
:is(.tarjeta-recurso, .panel) .icono svg { stroke: var(--c); }
:is(.tarjeta-recurso, .panel) .icono svg * { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease; }
.con-js :is(.tarjeta-recurso, .panel):not(.visto) .icono svg * { stroke-dashoffset: 1; }
:is(.tarjeta-recurso, .panel):hover { border-color: color-mix(in srgb, var(--c) 45%, #fff); box-shadow: 0 14px 30px rgba(28, 26, 34, .08); transform: translateY(-3px); }
:is(.tarjeta-recurso, .panel):hover .icono { transform: translateY(-3px) rotate(-6deg) scale(1.08); background: color-mix(in srgb, var(--c) 18%, #fff); }
:is(.tarjeta-recurso, .panel):hover .icono svg * { animation: icono-dibuja .9s ease both; }

/* Los nueve valores: título en negro y el número con su color. */
.valor { --c: var(--morado); transition: background-color .25s ease; }
.valor h3 { color: var(--negro); }
.valor span { color: var(--c); }
.valor:hover { background: color-mix(in srgb, var(--c) 6%, #fff); }

@media (prefers-reduced-motion: reduce) {
  :is(.tarjeta-recurso, .panel), :is(.tarjeta-recurso, .panel) .icono, :is(.tarjeta-recurso, .panel) .icono svg * { transition: none; }
  .con-js :is(.tarjeta-recurso, .panel):not(.visto) .icono svg * { stroke-dashoffset: 0; }
  :is(.tarjeta-recurso, .panel):hover, :is(.tarjeta-recurso, .panel):hover .icono { transform: none; }
  :is(.tarjeta-recurso, .panel):hover .icono svg * { animation: none; }
}
/* El arco decorativo de las cabeceras, en gris en vez de lila; y la
   etiqueta "Coming soon" del centro de descargas, a su tamaño. */
.arco-3 { border-color: rgba(28, 26, 34, .06); }
.prosa .pronto { justify-self: start; width: fit-content; }

/* ---- El selector de idioma son enlaces ----
   Cada opción lleva a la misma página en ese idioma; la del idioma actual
   va marcada. */
a.idioma-opcion { text-decoration: none; }
.idioma-opcion[aria-current="true"] { border-color: var(--violeta); background: var(--lila); color: var(--morado); }

/* ---- Selector de idioma: rayas de neón y nombres con su bandera ----
   Cada raya es una fila de puntos de luz que salen del círculo hacia el
   idioma, uno tras otro, como una carga. Cada nombre va subrayado con los
   colores de su bandera (vienen de _fuente/sitio.mjs). */
.idioma-rama i { top: -3px; height: 6px; border-radius: 3px; box-shadow: none; background: radial-gradient(circle, #C4B5FD 0 1.4px, #7C3AED 1.5px 2.3px, transparent 2.6px) 0 50% / 9px 6px repeat-x; filter: drop-shadow(0 0 3px rgba(124, 58, 237, .9)) drop-shadow(0 0 7px rgba(167, 139, 250, .6)); -webkit-mask-image: linear-gradient(90deg, #000 0 30%, rgba(0, 0, 0, .25) 50%, #000 70% 100%); mask-image: linear-gradient(90deg, #000 0 30%, rgba(0, 0, 0, .25) 50%, #000 70% 100%); -webkit-mask-size: 220% 100%; mask-size: 220% 100%; }
.idioma.abierto .idioma-rama i { animation: neon-puntos .5s linear infinite, neon-carga 1.4s linear infinite; }
@media (hover: hover) {
  .idioma:hover .idioma-rama i { animation: neon-puntos .5s linear infinite, neon-carga 1.4s linear infinite; }
}
@keyframes neon-puntos { to { background-position: 9px 50%; } }
@keyframes neon-carga { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: -20% 0; mask-position: -20% 0; } }

.idioma-opcion { padding-bottom: 12px; }
.idioma-opcion::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 3px; border-radius: 2px; background: var(--bandera, var(--violeta)); box-shadow: 0 0 0 .5px rgba(28, 26, 34, .18); }
@media (prefers-reduced-motion: reduce) {
  .idioma-rama i { animation: none !important; }
}

/* ---- La escena: el video entre la portada y los servicios ----
   Una pantalla ancha con las esquinas redondeadas. El video va sin sonido
   y oscurecido hacia abajo y a la izquierda para que el lema se lea.
   Encima, una onda de voz y el saludo en los tres idiomas, que se van
   encendiendo uno tras otro. */
.escena { padding: 56px 0 72px; background: #fff; }
.escena-caja { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 21 / 9; border-radius: 28px; background: #1C1A22; box-shadow: 0 30px 60px rgba(28, 26, 34, .18); }
.escena-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.06); transition: transform 6s ease-out; }
.escena.viva .escena-video { transform: scale(1); }
.escena-caja::after { content: ''; position: absolute; inset: 0; background: linear-gradient(75deg, rgba(20, 18, 26, .86) 0%, rgba(20, 18, 26, .55) 38%, rgba(20, 18, 26, 0) 68%), linear-gradient(0deg, rgba(20, 18, 26, .5) 0%, rgba(20, 18, 26, 0) 45%); }
.escena-texto { position: absolute; z-index: 1; left: clamp(22px, 5vw, 64px); right: 24px; bottom: clamp(22px, 5vw, 60px); color: #fff; }
.escena-texto h2 { max-width: 14ch; color: #fff; font-weight: 800; font-size: clamp(26px, 4.4vw, 58px); line-height: 1.06; }
.escena-voz { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(12px, 2vw, 22px); }

/* La onda: siete barras que suben y bajan como una voz. */
.onda { display: flex; align-items: center; gap: 4px; height: 30px; }
.onda i { width: 4px; height: 100%; border-radius: 2px; background: #fff; transform: scaleY(.25); animation: onda 1.1s ease-in-out infinite; }
.onda i:nth-child(1) { animation-delay: -.9s; } .onda i:nth-child(2) { animation-delay: -.3s; } .onda i:nth-child(3) { animation-delay: -.7s; }
.onda i:nth-child(4) { animation-delay: -.1s; } .onda i:nth-child(5) { animation-delay: -.55s; } .onda i:nth-child(6) { animation-delay: -.2s; } .onda i:nth-child(7) { animation-delay: -.8s; }
@keyframes onda { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }

/* Los saludos: el texto viene de un atributo para que no se traduzca; cada
   uno se enciende durante su tercio del ciclo. */
.saludos { display: flex; gap: 14px; font-family: var(--titulo); font-weight: 700; font-size: clamp(14px, 1.5vw, 18px); letter-spacing: .04em; }
.saludos b { font-weight: inherit; color: rgba(255, 255, 255, .45); animation: saludo 6s linear infinite; }
.saludos b::before { content: attr(data-saludo); }
.saludos b + b::before { content: '·  ' attr(data-saludo); white-space: pre; }
.saludos b:nth-child(2) { animation-delay: 2s; }
.saludos b:nth-child(3) { animation-delay: 4s; }
@keyframes saludo { 0%, 30% { color: #fff; text-shadow: 0 0 14px rgba(255, 255, 255, .55); } 36%, 100% { color: rgba(255, 255, 255, .45); text-shadow: none; } }

@media (max-width: 760px) {
  .escena { padding: 36px 0 48px; }
  .escena-caja { aspect-ratio: 4 / 5; border-radius: 22px; }
  .escena-video { object-position: 32% 50%; }
  .escena-caja::after { background: linear-gradient(0deg, rgba(20, 18, 26, .9) 0%, rgba(20, 18, 26, .45) 45%, rgba(20, 18, 26, 0) 75%); }
}
@media (prefers-reduced-motion: reduce) {
  .onda i, .saludos b { animation: none; }
  .onda i { transform: scaleY(.6); }
  .saludos b { color: #fff; }
  .escena-video { transform: none; transition: none; }
}

/* ---- Cabecera con foto (Why BRICEVO: la bandera de Haití) ----
   El texto a la izquierda y la foto a la derecha, en un marco redondeado
   algo inclinado. La bandera se mece despacio y le pasa un brillo por
   encima, como tela al viento. */
.encabezado-con-foto .ancho { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: center; }
.encabezado-foto { position: relative; overflow: hidden; margin: 0; aspect-ratio: 4 / 3; border-radius: 26px; border: 6px solid #fff; box-shadow: 0 26px 50px rgba(28, 26, 34, .2); transform: rotate(2.5deg); animation: bandera-mece 7s ease-in-out infinite; }
.encabezado-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; transform: scale(1.08); animation: bandera-viento 9s ease-in-out infinite; }
.encabezado-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0) 62%) 130% 0 / 260% 100% no-repeat; animation: bandera-brillo 5.5s ease-in-out infinite; }
@keyframes bandera-mece { 0%, 100% { transform: rotate(2.5deg) translateY(0); } 50% { transform: rotate(1.2deg) translateY(-8px); } }
@keyframes bandera-viento { 0%, 100% { transform: scale(1.08) translateX(-1.2%) skewY(0deg); } 50% { transform: scale(1.1) translateX(1.2%) skewY(-.8deg); } }
@keyframes bandera-brillo { 0% { background-position: 130% 0; } 60%, 100% { background-position: -40% 0; } }
@media (max-width: 900px) {
  .encabezado-con-foto .ancho { grid-template-columns: 1fr; gap: 32px; }
  .encabezado-foto { aspect-ratio: 16 / 9; max-width: 460px; transform: rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .encabezado-foto, .encabezado-foto img, .encabezado-foto::after { animation: none; }
}

/* ---- La foto de la cabecera pasa a ser el fondo ----
   Sustituye al marco inclinado de arriba: el cielo llena toda la cabecera,
   la bandera queda a la derecha vista desde abajo y el título va dentro,
   en blanco, sobre el azul. A la izquierda el cielo se oscurece para que
   la letra se lea. */
.encabezado-con-foto { padding: 128px 0 132px; color: #fff; border-bottom: 0; background: linear-gradient(90deg, #0A3F9C 0%, #1574D6 46%, #2A93EA 100%); }
.encabezado-con-foto .arco { display: none; }
.encabezado-con-foto .ancho { display: block; position: static; }
.encabezado-con-foto .encabezado-texto { position: relative; z-index: 2; }
.encabezado-con-foto .rotulo { color: #DCEBFF; }
.encabezado-con-foto h1 { color: #fff; text-shadow: 0 2px 18px rgba(4, 28, 84, .45); }
.encabezado-con-foto .entrada { color: #F2F7FF; text-shadow: 0 1px 12px rgba(4, 28, 84, .5); }
.encabezado-foto { position: absolute; z-index: 0; inset: 0 0 0 auto; width: min(72%, 1250px); max-width: none; aspect-ratio: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; transform: none; animation: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%); mask-image: linear-gradient(90deg, transparent 0%, #000 42%); }
.encabezado-foto img { object-position: 50% 42%; transform-origin: 20% 60%; }
.encabezado-con-foto::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(6, 40, 112, .55) 0%, rgba(6, 40, 112, .28) 40%, rgba(6, 40, 112, 0) 66%); }
@media (max-width: 900px) {
  .encabezado-con-foto { padding: 56px 0 calc(62vw + 24px); background: linear-gradient(180deg, #0A3F9C 0%, #1574D6 55%, #2A93EA 100%); }
  .encabezado-foto { inset: auto 0 0 0; width: 100%; height: 72vw; max-width: none; aspect-ratio: auto; transform: none; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%); }
  .encabezado-con-foto::after { background: linear-gradient(180deg, rgba(6, 40, 112, .5) 0%, rgba(6, 40, 112, 0) 60%); }
}

/* ---- Careers: la cinta de vacantes y la foto ----
   Arriba, los puestos abiertos en una fila que se desliza hacia los lados.
   Si no hay ninguno, un aviso que invita a dejar los datos. A la izquierda
   del formulario, bajo el título, una foto de ambiente. */
.vacantes { margin-bottom: 56px; }
.vacantes-vacio { max-width: 720px; padding: 22px 26px; border: 1.5px dashed #8F73F2; border-radius: 20px; background: rgba(27, 11, 58, .3); color: #E7DEFF; }
.vacantes-vacio b { display: block; margin-bottom: 4px; font-family: var(--titulo); font-weight: 800; font-size: 19px; color: #fff; }
.vacantes-fila { display: none; gap: 18px; overflow-x: auto; padding: 4px 4px 18px; margin: 0 -4px; scroll-snap-type: x proximity; scrollbar-color: #8F73F2 transparent; }
.vacantes.con-vacantes .vacantes-vacio { display: none; }
.vacantes.con-vacantes .vacantes-fila { display: flex; }
.vacante { flex: 0 0 min(340px, 84vw); display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 22px; border-radius: 22px; background: #fff; color: var(--texto); scroll-snap-align: start; box-shadow: 0 16px 34px rgba(12, 3, 44, .3); }
.vacante h3 { color: var(--tinta); font-weight: 800; font-size: 19px; line-height: 1.25; }
.vacante-tipo { font-family: var(--titulo); font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--morado); }
.vacante-detalle { font-size: 14.5px; color: var(--suave); white-space: pre-line; }
.vacante .boton { margin-top: auto; align-self: flex-start; color: #fff; background: linear-gradient(135deg, var(--morado), var(--violeta)); padding: 11px 20px; font-size: 14px; }

.aplicar-foto { margin: 34px 0 0; overflow: hidden; border-radius: 24px; border: 1.5px solid rgba(255, 255, 255, .35); box-shadow: 0 22px 44px rgba(12, 3, 44, .4); }
.aplicar-foto img { display: block; width: 100%; height: auto; }

.puesto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; padding: 12px 16px; border-radius: 14px; background: #fff; color: var(--texto); font-size: 14.5px; }
.puesto b { color: var(--tinta); font-family: var(--titulo); }
.puesto-quitar { margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #F0F0F3; color: var(--tinta); font-size: 18px; line-height: 1; cursor: pointer; }
@media (max-width: 900px) {
  .vacantes { margin-bottom: 40px; }
  .aplicar-foto { margin-top: 24px; }
}
.puesto[hidden] { display: none; }

/* La foto de la portada conserva su tamaño grande, con Manuel como punto
   central, pero se ancla arriba: antes se anclaba un poco más abajo y en
   pantallas anchas le recortaba la cabeza. */
@media (min-width: 761px) {
  .portada::before { background-position: 92% 0; }
}

/* En celular la foto entraba completa, pero el fundido blanco le tapaba la
   parte alta de la cabeza. Se baja un poco la foto y se acorta el fundido. */
@media (max-width: 760px) {
  .portada::before { background-size: auto 92%; background-position: 92% 100%; }
  .portada::after { background: linear-gradient(180deg, #fff 0%, #fff calc(100% - 64.5vw), rgba(255, 255, 255, 0) calc(100% - 57vw)); }
}

/* La comprobación de Turnstile en los formularios. Casi siempre pasa sola y
   no ocupa sitio; si pide algo al visitante, queda sobre el botón. */
.persona { margin: 0 0 14px; }
.persona:empty { margin: 0; }

/* ── Formularios: grupo de casillas, "otra", aviso legal ── */
.campo-grupo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.campo .otra { margin-top: 12px; }
.legal { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: var(--suave); cursor: pointer; }
.legal input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--morado); cursor: pointer; }
.aplicar .legal input { accent-color: #fff; }
.legal a { color: var(--morado); text-decoration: underline; }
.aplicar .legal { color: #CDBBFF; }
.aplicar .legal a { color: #fff; }
@media (max-width: 760px) { .campo-grupo { grid-template-columns: 1fr; } }

/* ── Pie: enlace legal ── */
.pie-base { flex-wrap: wrap; }
.pie-legal { color: var(--suave); text-decoration: underline; }
.pie-legal:hover { color: var(--morado); }

/* ── Política de privacidad ── */
.politica { max-width: 760px; }
.politica h2 { margin-top: 18px; font-size: clamp(20px, 2.4vw, 25px); }
.politica ul { display: grid; gap: 10px; margin: 0; padding-left: 22px; }
.politica .fecha-legal { color: var(--suave); font-size: 14.5px; }