/* =====================================================================
   Certifika2 — portada pública
   Paleta de marca: tinta (navy), papel frío, sello (rojo de tampón), oro.
   Tipografía: Bricolage Grotesque (títulos), IBM Plex Sans (texto),
   IBM Plex Mono (códigos).
   ===================================================================== */
:root {
  --tinta: #1b2a41;
  --tinta-suave: #3d4c63;
  --tinta-tenue: #7b8699;
  --papel: #eef1f6;
  --blanco: #ffffff;
  --linea: #d9dee6;
  --sello: #b4231f;
  --sello-oscuro: #8e1b18;
  --oro: #c99a2e;
  --valido: #1e7a46;
  --aviso: #9a6400;
  --display: "Bricolage Grotesque", "Segoe UI", Arial, sans-serif;
  --texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --radio: 8px;
  --sombra: 0 1px 2px rgba(27, 42, 65, .06), 0 12px 32px rgba(27, 42, 65, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.portada { margin: 0; font-family: var(--texto); font-size: 17px; line-height: 1.55; color: var(--tinta); background: var(--blanco); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.015em; line-height: 1.1; margin: 0 0 .6em; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.mono { font-family: var(--mono); font-weight: 600; letter-spacing: .04em; }
.contenedor { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.contenedor-estrecho { max-width: 760px; }
.eyebrow { font-family: var(--mono); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sello); margin: 0 0 .9rem; }
.eyebrow-claro { color: var(--oro); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.3rem; border-radius: var(--radio); font-family: var(--display); font-weight: 700; font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .12s ease, background .15s ease, border-color .15s ease; }
.boton:hover { transform: translateY(-1px); }
.boton-sello { background: var(--sello); color: #fff; border-color: var(--sello); }
.boton-sello:hover { background: var(--sello-oscuro); border-color: var(--sello-oscuro); }
.boton-tinta { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.boton-fantasma { background: transparent; color: var(--tinta); border-color: var(--linea); }
.boton-fantasma:hover { border-color: var(--tinta); }
.boton-grande { padding: 1rem 1.8rem; font-size: 1.1rem; }
.enlace { text-decoration: none; font-weight: 500; }
.enlace:hover { text-decoration: underline; }

/* Navegación */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); }
.nav-fila { display: flex; align-items: center; gap: 2rem; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: .06em; text-decoration: none; }
.logo-sello { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--sello); color: var(--sello); border-radius: 50%; font-size: .95rem; transform: rotate(-8deg); }
/* Isotipo de la marca: el logotipo completo solo cabe legible en el acceso y en los documentos. */
.logo-icono { flex: none; border-radius: 8px; }
.nav-enlaces { display: flex; gap: 1.4rem; margin-left: auto; }
.nav-enlaces a { text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--tinta-suave); }
.nav-enlaces a:hover { color: var(--tinta); }
.nav-acciones { display: flex; align-items: center; gap: 1rem; }

/* Hero */
.hero { padding: 4.5rem 0 3.5rem; background: linear-gradient(180deg, var(--blanco) 0%, var(--papel) 100%); }
.hero-fila { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.hero-sub { font-size: 1.2rem; color: var(--tinta-suave); max-width: 34rem; }
.hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.6rem 0 1rem; }
.hero-nota { font-size: .9rem; color: var(--tinta-tenue); }

/* El artefacto: un certificado con su sello de verificación */
.hero-artefacto { position: relative; perspective: 1200px; }
.certificado { position: relative; background: #fffdf8; border-radius: 4px; padding: 10px; box-shadow: var(--sombra); transform: rotate(-1.5deg); }
.cert-borde { border: 1.5px solid var(--oro); outline: 4px double rgba(201, 154, 46, .35); outline-offset: 3px; padding: 1.4rem 1.6rem 1.2rem; font-family: var(--serif, Georgia, serif); }
.cert-cabecera { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-tenue); }
.cert-titulo { font-family: var(--display); font-weight: 800; font-size: 1.9rem; letter-spacing: .18em; text-transform: uppercase; text-align: center; margin: 1rem 0 .3rem; color: var(--tinta); }
.cert-otorga { text-align: center; font-size: .85rem; color: var(--tinta-tenue); margin: 0; font-style: italic; }
.cert-nombre { text-align: center; font-family: var(--display); font-weight: 700; font-size: 1.45rem; margin: .2rem 0 .5rem; letter-spacing: -.01em; }
.cert-curso { text-align: center; font-size: .9rem; color: var(--tinta-suave); line-height: 1.45; margin: 0 0 1.2rem; }
.cert-pie { display: flex; justify-content: space-between; align-items: flex-end; }
.cert-firma { font-size: .72rem; color: var(--tinta-tenue); }
.cert-firma span { display: block; width: 130px; border-top: 1px solid var(--tinta); margin-bottom: .3rem; }
.cert-qr { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.cert-qr img { width: 76px; height: 76px; }
.cert-qr .mono { font-size: .72rem; color: var(--tinta); }
.sello-valido { position: absolute; left: 30px; bottom: 58px; padding: .35rem .9rem .45rem; border: 3px solid var(--valido); border-radius: 6px; color: var(--valido); text-align: center; background: rgba(255, 255, 255, .55); transform: rotate(-9deg); box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); animation: sellar .55s cubic-bezier(.2, 1.4, .4, 1) .5s both; mix-blend-mode: multiply; }
.sello-valido span { display: block; font-family: var(--display); font-weight: 800; font-size: 1.7rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1; }
.sello-valido small { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; margin-top: .2rem; }
@keyframes sellar { 0% { opacity: 0; transform: rotate(-9deg) scale(2.4); } 60% { opacity: 1; transform: rotate(-9deg) scale(.96); } 100% { opacity: 1; transform: rotate(-9deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .sello-valido { animation: none; } .boton:hover { transform: none; } html { scroll-behavior: auto; } }

/* Franja de datos */
.franja-datos { background: var(--tinta); color: #fff; }
.franja-fila { display: grid; grid-template-columns: repeat(5, 1fr); }
.franja-fila > div { padding: 1.1rem 1rem; border-left: 1px solid rgba(255, 255, 255, .12); display: flex; flex-direction: column; gap: .15rem; }
.franja-fila > div:first-child { border-left: 0; }
.franja-fila .mono { color: var(--oro); font-size: 1.05rem; }
.franja-fila small { color: rgba(255, 255, 255, .7); font-size: .8rem; }

/* Secciones */
.seccion { padding: 5rem 0; }
.seccion + .seccion { border-top: 1px solid var(--linea); }
.intro { color: var(--tinta-suave); max-width: 44rem; }

/* Pasos (secuencia real) */
.pasos { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; counter-reset: paso; }
.pasos li { position: relative; padding-top: .5rem; border-top: 2px solid var(--tinta); }
.paso-n { position: absolute; top: -1.05rem; left: 0; background: var(--blanco); padding-right: .5rem; font-family: var(--mono); font-weight: 600; color: var(--sello); font-size: .95rem; }
.pasos h3 { margin: .8rem 0 .4rem; }
.pasos p { color: var(--tinta-suave); font-size: .95rem; margin: 0; }

/* Verificador */
.verificador { background: var(--tinta); color: #fff; padding: 4.5rem 0; }
.verificador h2 { color: #fff; }
.verificador p { color: rgba(255, 255, 255, .78); max-width: 32rem; }
.verificador-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.verificador-form { display: flex; gap: .6rem; margin-top: 1.4rem; max-width: 30rem; }
.verificador-form input { flex: 1; min-width: 0; padding: .8rem 1rem; border-radius: var(--radio); border: 2px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: #fff; font-size: 1.15rem; letter-spacing: .12em; text-transform: uppercase; }
.verificador-form input::placeholder { color: rgba(255, 255, 255, .4); text-transform: none; letter-spacing: .06em; }
.verificador-form input:focus { border-color: var(--oro); outline: none; }
.veredictos { display: grid; gap: .8rem; }
.veredicto { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: .9rem 1.1rem; border-radius: var(--radio); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.veredicto span { font-family: var(--display); font-weight: 800; letter-spacing: .12em; font-size: 1.05rem; padding: .3rem .7rem; border: 2px solid currentColor; border-radius: 4px; transform: rotate(-4deg); }
.veredicto small { color: rgba(255, 255, 255, .75); font-size: .88rem; }
.veredicto.valido span { color: #6fd39a; }
.veredicto.revocado span { color: #ff8a82; }
.veredicto.vencido span { color: #ffd166; }

/* Ficha técnica */
.ficha { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: 1rem; }
.ficha th, .ficha td { padding: 1rem .9rem; border-top: 1px solid var(--linea); vertical-align: top; text-align: left; }
.ficha tr:last-child th, .ficha tr:last-child td { border-bottom: 1px solid var(--linea); }
.ficha th { width: 11rem; font-family: var(--mono); font-weight: 600; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sello); }
.ficha td { color: var(--tinta-suave); }

/* SST */
.seccion-sst { background: var(--papel); }
.sst-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.lista-marcas { list-style: none; padding: 0; margin: 1rem 0 1.6rem; }
.lista-marcas li { position: relative; padding-left: 1.6rem; margin-bottom: .6rem; color: var(--tinta-suave); }
.lista-marcas li::before { content: "✓"; position: absolute; left: 0; color: var(--valido); font-weight: 700; }
.registro-mock { background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra); padding: 1.2rem; font-size: .78rem; transform: rotate(1deg); }
.registro-titulo { font-family: var(--display); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; text-align: center; margin: 0 0 .8rem; }
.registro-mock table { width: 100%; border-collapse: collapse; margin-bottom: .6rem; }
.registro-mock th, .registro-mock td { border: 1px solid var(--linea); padding: .3rem .45rem; text-align: left; }
.registro-mock th { background: var(--papel); font-weight: 600; white-space: nowrap; }
.firma-celda { min-width: 70px; }
.registro-pie { margin: 0; font-size: .68rem; color: var(--tinta-tenue); text-align: right; }

/* Planes */
.planes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 2rem; }
.plan { position: relative; display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.4rem 1.2rem; background: var(--blanco); }
.plan-destacado { border-color: var(--tinta); box-shadow: var(--sombra); }
.plan-etiqueta { position: absolute; top: -.75rem; left: 1.2rem; background: var(--tinta); color: #fff; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 4px; }
.plan h3 { margin-bottom: .4rem; }
.plan-precio { font-family: var(--display); font-weight: 800; font-size: 2rem; letter-spacing: -.02em; margin: 0; line-height: 1; }
.plan-precio .moneda { font-size: 1rem; margin-right: .2rem; vertical-align: top; }
.plan-precio .periodo { font-size: .9rem; font-weight: 500; color: var(--tinta-tenue); margin-left: .15rem; }
.plan-cuota { font-size: .9rem; color: var(--tinta-suave); margin: .5rem 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linea); }
.plan ul { list-style: none; padding: 0; margin: 0 0 1.4rem; font-size: .88rem; flex: 1; }
.plan li { padding: .25rem 0 .25rem 1.2rem; position: relative; color: var(--tinta-suave); }
.plan li::before { content: "·"; position: absolute; left: .3rem; color: var(--oro); font-weight: 800; }
.plan .boton { width: 100%; }

/* FAQ */
.seccion-faq details { border-top: 1px solid var(--linea); padding: 1rem 0; }
.seccion-faq details:last-of-type { border-bottom: 1px solid var(--linea); }
.seccion-faq summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.seccion-faq summary::-webkit-details-marker { display: none; }
.seccion-faq summary::after { content: "+"; color: var(--sello); font-weight: 700; }
.seccion-faq details[open] summary::after { content: "–"; }
.seccion-faq details p { margin: .7rem 0 0; color: var(--tinta-suave); }

/* Cierre y pie */
.cierre { background: var(--papel); padding: 4rem 0; }
.cierre-fila { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cierre h2 { margin-bottom: .3rem; }
.cierre p { margin: 0; color: var(--tinta-suave); }
.pie { background: var(--tinta); color: rgba(255, 255, 255, .8); padding: 3rem 0; font-size: .9rem; }
.pie-fila { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.logo-claro { color: #fff; }
.logo-claro .logo-sello { border-color: var(--oro); color: var(--oro); }
.pie p { margin: .6rem 0 0; }
.pie nav { display: flex; flex-direction: column; gap: .4rem; }
.pie nav a { text-decoration: none; }
.pie nav a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 1000px) {
  .planes { grid-template-columns: repeat(3, 1fr); }
  .pasos { grid-template-columns: repeat(2, 1fr); }
  .franja-fila { grid-template-columns: repeat(3, 1fr); }
  .franja-fila > div:nth-child(4) { border-left: 0; }
}
@media (max-width: 820px) {
  .nav-enlaces { display: none; }
  .hero { padding: 3rem 0 2.5rem; }
  .hero-fila, .verificador-fila, .sst-fila { grid-template-columns: 1fr; gap: 2rem; }
  .hero-artefacto { max-width: 480px; margin: 0 auto; }
  .sello-valido { left: 14px; bottom: 54px; }
  .ficha th { width: 7.5rem; }
}
@media (max-width: 600px) {
  body.portada { font-size: 16px; }
  .nav-fila { gap: 1rem; }
  .nav-acciones .enlace { display: none; }
  .planes, .pasos { grid-template-columns: 1fr; }
  .franja-fila { grid-template-columns: repeat(2, 1fr); }
  .franja-fila > div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .ficha th, .ficha td { display: block; width: auto; padding: .5rem 0; }
  .ficha th { border-top: 1px solid var(--linea); padding-top: .9rem; }
  .ficha td { border-top: 0; padding-bottom: .9rem; }
  .verificador-form { flex-direction: column; }
  .cert-borde { padding: 1rem; }
  .cert-titulo { font-size: 1.4rem; }
}

/* Anti-desbordamiento: los hijos de rejilla no pueden exceder su columna */
.hero-fila > *, .sst-fila > *, .verificador-fila > *, .planes > *, .pasos > * { min-width: 0; }
.registro-mock { overflow-x: auto; }
.registro-mock table { min-width: 340px; }
body.portada { overflow-x: hidden; }