/* ==========================================================================
   NODEX · Páginas interiores
   Cabecera simple, auditoría (formulario), gracias y páginas legales.
   Requiere base.css.
   ========================================================================== */

/* ---------- Cabecera simple ---------- */
.cab-simple { padding-top: max(var(--e-4), env(safe-area-inset-top)); }
.cab-simple .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); }
.marca-pildora {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .35rem 1rem .35rem .35rem;
  border-radius: var(--r-pill); background: var(--c-fondo); border: 1px solid var(--c-borde); color: var(--c-tinta); text-decoration: none;
}
.volver { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .9375rem; font-weight: 500; color: var(--c-texto-2); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .volver:hover { color: var(--c-tinta); text-decoration: underline; } }
.cab-simple .atendiendo { padding: .45rem .9rem; border-radius: var(--r-pill); background: var(--c-fondo); border: 1px solid var(--c-borde); }

/* ---------- Auditoría ---------- */
.auditoria { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(4rem, 3rem + 4vw, 6rem); }
.auditoria-grid { display: grid; gap: var(--e-6); grid-template-areas: "intro" "form" "extra"; }
.auditoria-intro { grid-area: intro; }
.auditoria-extra { grid-area: extra; }
.auditoria .formulario { grid-area: form; }
.auditoria h1 { max-width: 15ch; font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); }
.auditoria .sub { max-width: 34rem; margin-top: 1.25rem; font-size: var(--t-md); line-height: 1.6; color: var(--c-texto-3); }
@media (min-width: 60em) {
  .auditoria-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; grid-template-areas: "intro form" "extra form"; gap: var(--e-6) clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
}

.llevas { list-style: none; display: grid; gap: var(--e-2); }
.llevas li { display: grid; grid-template-columns: 22px 1fr; gap: .9rem; padding: .95rem 1.1rem; border-radius: var(--r-md); background: var(--c-superficie); }
.llevas svg { width: 22px; height: 22px; margin-top: .15rem; fill: none; stroke: var(--acento); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.respaldo {
  margin-top: var(--e-6); display: grid; justify-items: center; gap: var(--e-5); text-align: center;
  padding: clamp(2rem, 1.5rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2vw, 3rem); border-radius: var(--r-xl);
}
.respaldo .sello { width: clamp(9rem, 7rem + 5vw, 12rem); margin: 0; }
.respaldo p { max-width: 26rem; font-size: var(--t-md); line-height: 1.5; color: var(--c-texto-osc); }
.respaldo p b { display: block; margin-bottom: var(--e-2); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 500; line-height: 1.15; letter-spacing: -.03em; color: var(--c-fondo); }
.respaldo { background: var(--c-tinta); }

/* ---------- Formulario ---------- */
.formulario { padding: clamp(1.25rem, .8rem + 2vw, 2.25rem); border-radius: var(--r-xl); background: var(--c-fondo); border: 1px solid var(--c-borde); box-shadow: var(--sombra-2); }
.formulario h2 { font-size: 1.5rem; letter-spacing: -.02em; }
.formulario .pasito { margin-top: .35rem; font-size: var(--t-xs); color: var(--c-texto-3); }
.formulario .obligatorios { margin-top: var(--e-2); font-size: var(--t-xs); color: var(--c-texto-3); }
.req { color: var(--c-error); margin-left: .15em; }
.campos { margin-top: var(--e-5); display: grid; gap: 1.1rem var(--e-4); }
@media (min-width: 40em) { .campos { grid-template-columns: 1fr 1fr; } .campo.ancho { grid-column: 1 / -1; } }
.campo { display: grid; gap: .4rem; align-content: start; }
fieldset.campo { margin: 0; padding: 0; min-width: 0; border: 0; }
.campo label, .campo legend { padding: 0; font-size: var(--t-sm); font-weight: 600; color: var(--c-tinta); }
.campo .opc { font-weight: 400; color: var(--c-texto-3); }
.campo input[type=text], .campo input[type=tel], .campo input[type=email], .campo select {
  width: 100%; min-height: 3rem; padding: .7rem var(--e-4); font-size: var(--t-base); color: var(--c-tinta);
  background: var(--c-fondo); border: 1px solid var(--c-borde); border-radius: var(--r-md);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.campo select {
  appearance: none; padding-right: 2.5rem; background-repeat: no-repeat; background-position: right var(--e-4) center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%230A0A0A' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
}
.campo input::placeholder { color: var(--c-texto-3); }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(138,106,74,.2); }
@media (hover: hover) and (pointer: fine) { .campo input:hover, .campo select:hover { border-color: var(--acento); } }
.campo [aria-invalid="true"] { border-color: var(--c-error); background: var(--c-error-fondo); }
.error { font-size: .8125rem; color: var(--c-error); }
.error:empty { display: none; }

.casillas { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: .1rem; }
.casilla { position: relative; }
.casilla input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.casilla span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .45rem var(--e-4);
  border: 1px solid var(--c-borde); border-radius: var(--r-pill); background: var(--c-fondo); font-size: .9375rem; font-weight: 500;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform var(--d-rapida) var(--ease-out);
}
.casilla input:checked + span { background: var(--c-tinta); border-color: var(--c-tinta); color: var(--c-fondo); }
.casilla input:focus-visible + span { outline: 2px solid var(--acento-relleno); outline-offset: 2px; }
.casilla input:active + span { transform: scale(.97); }

.acepto { display: grid; grid-template-columns: 24px 1fr; gap: .75rem; align-items: start; font-size: .9375rem; line-height: 1.5; cursor: pointer; }
.acepto input { width: 24px; height: 24px; margin: 0; accent-color: var(--c-tinta); cursor: pointer; }
.acepto a { display: inline-block; padding-block: .75rem; margin-block: -.75rem; }

.formulario .btn { margin-top: var(--e-5); }
.formulario .btn[aria-busy="true"] { opacity: .75; pointer-events: none; }
.formulario .tras { margin-top: var(--e-4); display: flex; gap: .6rem; align-items: flex-start; font-size: .9375rem; line-height: 1.5; color: var(--c-texto-2); }
.formulario .tras .punto { margin-top: .5rem; }
.form-error { margin-top: var(--e-4); padding: .75rem var(--e-4); border-radius: var(--r-md); background: var(--c-error-fondo); color: var(--c-error); font-size: .9375rem; }

/* ---------- Gracias ---------- */
.gracias { padding-block: clamp(3rem, 2rem + 6vw, 7rem); }
.gracias .wrap { max-width: 46rem; }
.gracias .check { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-tinta); color: var(--c-fondo); }
.gracias .check svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gracias h1 { margin-top: var(--e-6); font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); }
.gracias .sub { margin-top: 1.25rem; font-size: var(--t-md); line-height: 1.6; color: var(--c-texto-3); }
.gracias .sub--fuerte { margin-top: var(--e-6); color: var(--c-tinta); }
.gracias ol { margin-top: var(--e-5); list-style: none; counter-reset: d; display: grid; gap: var(--e-2); }
.gracias ol li { counter-increment: d; display: grid; grid-template-columns: 2.5rem 1fr; padding: .95rem 1.1rem; border-radius: var(--r-md); background: var(--c-superficie); }
.gracias ol li::before { content: counter(d, decimal-leading-zero); padding-top: .2rem; font-size: .8125rem; color: var(--acento); }
.gracias .btn { margin-top: 2.5rem; }

/* ---------- Página no encontrada (404) ---------- */
.no-encontrada .codigo { font-size: var(--t-cifra); font-weight: 500; line-height: 1; letter-spacing: -.04em; color: var(--acento); }
.no-encontrada .acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: 2.5rem; }
.no-encontrada .acciones .btn { margin-top: 0; }

/* ---------- Legales ---------- */
.legal { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.legal .wrap { max-width: 46rem; }
.legal h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.legal h2 { margin-top: 2.5rem; font-size: 1.375rem; letter-spacing: -.02em; }
.legal h3 { margin-top: var(--e-5); font-size: 1.0625rem; letter-spacing: -.01em; }
.legal p, .legal ul { margin-top: var(--e-4); color: var(--c-texto-2); }
.legal ul { padding-left: 1.25rem; list-style: disc; }
.legal li + li { margin-top: var(--e-2); }
.legal li::marker { color: var(--c-laton); }
.legal strong { color: var(--c-tinta); font-weight: 600; }
.legal .actualizado { margin-top: var(--e-3); font-size: var(--t-sm); color: var(--c-texto-3); }
.legal .ficha { margin-top: var(--e-5); padding: var(--e-4) 1.25rem; border-radius: var(--r-md); background: var(--c-superficie); }
.legal .ficha p { margin-top: 0; }
.legal .ficha p + p { margin-top: var(--e-1); }
.legal .tabla { margin-top: var(--e-4); overflow-x: auto; border: 1px solid var(--c-borde); border-radius: var(--r-md); }
.legal table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--t-sm); color: var(--c-texto-2); }
.legal th, .legal td { padding: .7rem .9rem; text-align: left; vertical-align: top; }
.legal th { background: var(--c-superficie); color: var(--c-tinta); font-weight: 600; }
.legal tr + tr td { border-top: 1px solid var(--c-borde); }
.legal code { font-size: .9em; color: var(--c-tinta); }