/* Estilos del sitio de Reclutify. Colores y letras: marca/identidad-visual.md */
:root{
  --marino:#0B1F3A; --marino-2:#1A3A66; --verde:#12B76A; --verde-suave:#E3F7EE;
  --gris:#F4F6F8; --ambar:#FFB020; --azul:#3A6FB0; --linea:#DCE3EA; --texto-2:#4A5B70; --sobre-marino:#C9D6E6;
  --titulos:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --cuerpo:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --ancho:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--cuerpo);font-size:17px;line-height:1.6;color:var(--marino);background:#fff;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--titulos);line-height:1.12;margin:0;letter-spacing:-.02em}
h2{font-size:clamp(28px,5.2vw,40px);font-weight:800;max-width:22ch}
h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:6px}
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 20px}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-60px;background:var(--verde);color:var(--marino);padding:10px 14px;border-radius:10px;font-weight:600;z-index:20}
.saltar:focus{top:12px}

/* Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 22px;border-radius:14px;
  font-family:var(--titulos);font-weight:700;font-size:17px;text-decoration:none;transition:filter .15s,background .15s}
.boton svg{flex:none}
.boton-verde{background:var(--verde);color:var(--marino)}
.boton-verde:hover{filter:brightness(1.06)}
.boton-borde{border:1.5px solid rgba(255,255,255,.45);color:#fff}
.boton-borde:hover{background:rgba(255,255,255,.08)}
.boton-marino{background:var(--marino);color:#fff}
.boton-marino:hover{background:var(--marino-2)}

/* ---------- Portada ---------- */
.portada{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 120% at 100% 0%,var(--marino-2) 0%,var(--marino) 58%)}
.mancha{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.mancha.verde{width:380px;height:380px;background:var(--verde);opacity:.32;left:-140px;bottom:-200px}
.mancha.azul{width:300px;height:300px;background:var(--azul);opacity:.45;right:-60px;top:-120px}
.aro{position:absolute;border:1px solid rgba(255,255,255,.10);border-radius:50%;pointer-events:none}
.aro.uno{width:620px;height:620px;right:-300px;bottom:-360px}
.aro.dos{width:400px;height:400px;right:-190px;bottom:-250px}

.barra{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.barra .logo img{width:auto;height:36px}
.barra nav{display:flex;align-items:center;gap:18px;font-size:15px}
.barra nav a{color:var(--sobre-marino);text-decoration:none}
.barra nav a:hover{color:#fff;text-decoration:underline}
.barra .chico{display:none}
@media (min-width:720px){.barra .chico{display:inline}}

.portada-cuerpo{position:relative;display:grid;gap:40px;padding:28px 0 64px}
@media (min-width:960px){.portada-cuerpo{grid-template-columns:1.1fr .9fr;align-items:center;gap:56px;padding:48px 0 96px}}
.para-empresas{display:inline-block;font-family:var(--titulos);font-weight:700;font-size:13px;letter-spacing:.08em;
  color:var(--verde);background:rgba(11,31,58,.6);border:1px solid rgba(18,183,106,.55);border-radius:8px;padding:6px 11px;margin-bottom:22px}
.portada h1{font-size:clamp(44px,10.5vw,80px);font-weight:800;letter-spacing:-.035em;line-height:1.02;max-width:11ch}
.portada .bajada{font-size:clamp(19px,2.6vw,23px);line-height:1.45;color:#E6EDF5;margin-top:20px;max-width:30ch}
.portada .bajada strong{color:#fff;font-weight:600}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.acciones .boton{flex:1 1 220px}
@media (min-width:560px){.acciones .boton{flex:0 0 auto}}
.nota-portada{margin-top:16px;font-size:15px;color:var(--sobre-marino)}

/* La ficha: un perfil de vacante filtrando candidatos (ejemplo) */
.ficha{position:relative;background:#fff;color:var(--marino);border-radius:22px;padding:22px;max-width:440px;width:100%;justify-self:center;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.45)}
.ficha-cabeza{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--linea)}
.ficha-cabeza small{display:block;font-size:13px;color:var(--texto-2)}
.ficha-cabeza strong{display:block;font-family:var(--titulos);font-size:20px;font-weight:800;letter-spacing:-.01em;margin-top:2px}
.ejemplo{flex:none;font-size:12px;font-weight:600;background:#FFF4DC;color:#7A4E00;border-radius:999px;padding:4px 10px}
.requisitos{list-style:none;margin:14px 0 4px;padding:0;display:grid;gap:8px;font-size:15px}
.requisitos li{display:flex;gap:10px;align-items:center}
.palomita{flex:none;width:20px;height:20px;border-radius:6px;background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%230B1F3A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat}
.tache{flex:none;width:20px;height:20px;border-radius:6px;background:#E9EDF2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' fill='none' stroke='%234A5B70' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/15px no-repeat}
.ficha h3{font-size:14px;font-family:var(--cuerpo);font-weight:600;color:var(--texto-2);margin:16px 0 8px;letter-spacing:0}
.candidatos{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.candidato{display:flex;align-items:center;gap:12px;border:1.5px solid var(--linea);border-radius:14px;padding:10px 12px}
.candidato .cara{flex:none;width:36px;height:36px;border-radius:50%;background:var(--gris);display:grid;place-items:center;color:var(--texto-2)}
.candidato .quien{flex:1;min-width:0;font-size:15px;line-height:1.3}
.candidato .quien span{display:block;font-size:13px;color:var(--texto-2)}
.candidato .estado{flex:none;font-size:13px;font-weight:600;border-radius:8px;padding:4px 9px}
.candidato.cumple{border-color:var(--verde);background:var(--verde-suave)}
.candidato.cumple .estado{background:var(--verde);color:var(--marino)}
.candidato.no{background:var(--gris)}
.candidato.no .estado{background:#FFF4DC;color:#7A4E00}
.candidato.no .quien{color:var(--texto-2);text-decoration:line-through;text-decoration-color:rgba(74,91,112,.6)}

/* Un solo momento de movimiento: la ficha filtra al cargar */
@media (prefers-reduced-motion:no-preference){
  .candidato{animation:entra .5s ease-out both}
  .candidato:nth-child(2){animation-delay:.25s}
  .candidato:nth-child(3){animation-delay:.5s}
  .candidato .estado{animation:sello .35s ease-out 1.1s both}
  @keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes sello{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
}

/* ---------- Secciones ---------- */
.seccion{padding:72px 0}
@media (min-width:960px){.seccion{padding:104px 0}}
.seccion .intro{color:var(--texto-2);font-size:18px;margin-top:14px;max-width:56ch}
.fondo-claro{background:linear-gradient(160deg,#FFFFFF 0%,#EAF0F5 100%)}
.fondo-gris{background:var(--gris)}

/* Cómo funciona: es una secuencia, por eso va numerada */
.pasos{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:0;counter-reset:paso}
@media (min-width:860px){.pasos{grid-template-columns:repeat(3,1fr);gap:28px}}
.paso{position:relative;padding:0 0 32px 64px}
.paso::before{counter-increment:paso;content:counter(paso);position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;
  background:var(--marino);color:#fff;font-family:var(--titulos);font-weight:800;font-size:19px;display:grid;place-items:center}
.paso::after{content:"";position:absolute;left:21px;top:52px;bottom:6px;width:2px;background:var(--linea)}
.paso:last-child::after{display:none}
.paso.final::before{content:"";background:var(--marino) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%2312B76A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat}
@media (min-width:860px){
  .paso{padding:64px 0 0}
  .paso::after{left:56px;right:-14px;top:21px;bottom:auto;width:auto;height:2px}
}
.paso p{color:var(--texto-2);margin-top:8px}
.remate{margin-top:8px;font-family:var(--titulos);font-weight:700;font-size:20px}

/* Qué recibes / qué no */
.dos-columnas{display:grid;gap:20px;margin-top:40px}
@media (min-width:860px){.dos-columnas{grid-template-columns:1.15fr .85fr;gap:28px}}
.caja{background:#fff;border-radius:20px;padding:26px 24px;border:1px solid var(--linea)}
.caja.oscura{background:var(--marino);color:#fff;border-color:var(--marino)}
.caja.oscura h3{color:#fff}
.caja.oscura li{color:#E6EDF5}
.caja h3{margin-bottom:16px}
.lista{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lista li{display:flex;gap:12px;align-items:flex-start;line-height:1.45}
.lista li .palomita,.lista li .tache{margin-top:2px}
.caja.tenue{background:transparent;border-style:dashed;border-color:#B8C6D6}
.caja.tenue li{color:var(--texto-2)}

/* Para quién */
.quien-si{font-size:clamp(22px,3.4vw,28px);font-family:var(--titulos);font-weight:700;line-height:1.3;max-width:30ch;margin-top:22px}
.ejemplos{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;padding:0;list-style:none}
.ejemplos li{background:var(--verde-suave);border:1px solid #BDEBD5;border-radius:999px;padding:7px 14px;font-size:15px}

/* Banda del cotizador */
.banda{position:relative;overflow:hidden;color:#fff;background:radial-gradient(100% 140% at 0% 100%,#123A55 0%,var(--marino) 60%)}
.banda .mancha.verde{left:auto;right:-120px;bottom:-220px;opacity:.28}
.banda-cuerpo{position:relative;display:grid;gap:28px;align-items:center}
@media (min-width:860px){.banda-cuerpo{grid-template-columns:1.3fr .7fr}}
.banda h2{color:#fff}
.banda .intro{color:var(--sobre-marino)}
.preguntas-cot{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.preguntas-cot li{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 13px;font-size:15px;color:#E6EDF5}
.banda .boton{justify-self:start}
@media (min-width:860px){.banda .boton{justify-self:end}}

/* Preguntas frecuentes */
.faq{margin-top:36px;border-top:1px solid var(--linea);max-width:820px}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;
  padding:20px 0;font-family:var(--titulos);font-weight:700;font-size:18px;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary .mas{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--linea);position:relative;transition:transform .2s,background .2s}
.faq summary .mas::before,.faq summary .mas::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--marino);transform:translate(-50%,-50%)}
.faq summary .mas::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary .mas{transform:rotate(45deg);background:var(--verde-suave);border-color:var(--verde)}
.faq details p{padding:0 44px 22px 0;color:var(--texto-2);max-width:64ch}

/* Cierre */
.cierre{background:var(--verde);color:var(--marino)}
.cierre-cuerpo{display:grid;gap:26px;align-items:center}
@media (min-width:860px){.cierre-cuerpo{grid-template-columns:1.3fr .7fr}}
.cierre p{font-size:18px;margin-top:14px;max-width:46ch}
.cierre .boton{justify-self:start}
@media (min-width:860px){.cierre .boton{justify-self:end}}

/* ¿Buscas empleo? */
.empleo{padding:40px 0}
.empleo-cuerpo{display:flex;gap:18px;align-items:flex-start;border:1.5px solid var(--linea);border-radius:18px;padding:22px;background:#fff;max-width:820px}
.empleo-cuerpo .icono{flex:none;width:44px;height:44px;border-radius:12px;background:var(--gris);display:grid;place-items:center}
.empleo h2{font-size:21px;max-width:none}
.empleo p{color:var(--texto-2);margin-top:6px;font-size:16px}
.empleo a{color:var(--marino);font-weight:600}

/* Pie */
.pie{background:var(--marino);color:var(--sobre-marino);font-size:15px;padding:40px 0 calc(40px + env(safe-area-inset-bottom,0px))}
.pie-cuerpo{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between}
.pie img{height:32px;width:auto}
.pie nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.pie a{color:#fff}
.pie .legal{flex-basis:100%;font-size:14px;border-top:1px solid rgba(255,255,255,.12);padding-top:18px}

/* Página simple (aviso de privacidad) */
.simple{min-height:60vh;padding:64px 0 88px}
.simple h1{font-size:clamp(32px,6vw,46px);font-weight:800;max-width:20ch}
.simple p{color:var(--texto-2);margin-top:16px;max-width:60ch;font-size:18px}
.simple .boton{margin-top:28px}