/* BioPurity — capa de mejoras sobre biopurity-parallax.css.
   Se carga DESPUÉS de la hoja original: solo corrige la portada y da forma
   a las secciones de contenido, el formulario y el pie. */

:root{
  --azul-noche:#0a3761;
  --azul:#0b8fe5;
  --cian:#00a6df;
  --verde:#35ad2c;
  --texto:#47647c;
  --suave:#eff9fe;
  --borde:#d6eaf6;
  --radio:18px;
  --sombra:0 18px 40px -22px rgba(10,55,97,.35);
  --ancho:1120px;
}

/* ---------- Portada ---------- */

/* El logo de la esquina y el menú, alineados en la misma línea
   (antes el logo estaba desplazado 37px hacia abajo). */
.topbar{top:max(20px,env(safe-area-inset-top))}
.corner-logo{width:170px;max-height:none;filter:drop-shadow(0 1px 6px rgba(255,255,255,.55))}
.topbar nav{align-items:center}
.topbar nav a{padding:8px 2px;border-bottom:2px solid transparent;transition:border-color .2s}
.topbar nav a:hover,.topbar nav a:focus-visible{border-color:#fff}
.topbar nav a.nav-cta{padding:10px 18px;border:0;border-radius:999px;background:rgba(255,255,255,.18);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.topbar nav a.nav-cta:hover,.topbar nav a.nav-cta:focus-visible{background:#fff;color:var(--azul-noche);text-shadow:none}

/* Bloque central: centrado de verdad en vez del desplazamiento fijo de 205px. */
.brand{top:55%;transform:translate(-50%,-50%);width:min(46vw,640px)}
.brand-logo{opacity:.92;filter:drop-shadow(0 2px 14px rgba(255,255,255,.85))}
.brand-rule{border-radius:3px}
.brand-tagline{color:var(--azul-noche);font-size:clamp(11px,1vw,15px)}
.brand-tagline span{color:var(--cian)}
.hero-cta{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:15px 30px;border-radius:999px;
  background:var(--azul-noche);color:#fff;text-decoration:none;font-weight:800;font-size:13px;letter-spacing:1.6px;
  text-shadow:none;box-shadow:0 12px 28px -10px rgba(10,55,97,.7);transition:transform .2s,background .2s}
.hero-cta:hover,.hero-cta:focus-visible{background:var(--azul);transform:translateY(-2px)}
.hero-cta svg{width:16px;height:16px}

.scroll-hint{text-decoration:none}
.scroll-hint small{font-size:9px}

/* ---------- Secciones ---------- */

.content{padding-block:clamp(72px,10vw,120px);padding-inline:max(24px,7vw,calc((100% - var(--ancho)) / 2))}
.content .eyebrow{margin-bottom:0}
.content h1,.content h2{color:var(--azul-noche);font-size:clamp(30px,4.4vw,56px);letter-spacing:-.02em}
.content .lead{font-size:clamp(17px,1.5vw,20px);max-width:720px;margin-top:0}

.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:48px;padding:0;list-style:none}
.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:30px 28px;box-shadow:var(--sombra)}
.content.alt .tarjeta{background:#fff}
.tarjeta h3{margin:18px 0 8px;font-size:20px;color:var(--azul-noche)}
.tarjeta p{margin:0;font-size:16px!important;line-height:1.6}
.icono{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--cian),var(--azul))}
.icono.verde{background:linear-gradient(135deg,#8ad13f,var(--verde))}
.icono.noche{background:linear-gradient(135deg,var(--azul),var(--azul-noche))}
.icono svg{width:26px;height:26px}

/* Pasos numerados de la sección Tecnología */
.pasos{counter-reset:paso}
.pasos .tarjeta{position:relative}
.pasos .tarjeta::before{counter-increment:paso;content:"0" counter(paso);position:absolute;top:26px;right:28px;
  font-size:40px;font-weight:800;color:var(--borde);line-height:1}

/* ---------- Contacto ---------- */

.contacto-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);margin-top:44px;align-items:start}
.datos{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.dato{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:var(--radio);background:var(--suave);border:1px solid var(--borde)}
.dato .icono{width:44px;height:44px;border-radius:12px;flex:none}
.dato .icono svg{width:21px;height:21px}
.dato small{display:block;font-size:11px;font-weight:800;letter-spacing:2px;color:var(--cian);text-transform:uppercase}
.dato a,.dato span{color:var(--azul-noche);font-size:17px;font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.dato a:hover{text-decoration:underline}

/* Datos que aún hay que rellenar: se ven a simple vista para no publicarlos por error. */
.pendiente{background:#fff4c2;color:#7a5a00!important;border-radius:4px;padding:0 4px}

.formulario{background:#fff;border:1px solid var(--borde);border-radius:calc(var(--radio) + 4px);padding:clamp(24px,3.5vw,40px);box-shadow:var(--sombra)}
.formulario h3{margin:0 0 6px;font-size:22px;color:var(--azul-noche)}
.formulario > p{margin:0 0 24px;font-size:15px!important}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;min-width:0}
.campo input,.campo textarea,.campo select{width:100%}
.campo label{font-size:13px;font-weight:700;color:var(--azul-noche)}
.campo input,.campo textarea,.campo select{font:inherit;font-size:16px;color:var(--azul-noche);padding:13px 15px;border-radius:12px;
  border:1.5px solid var(--borde);background:#fbfdff;transition:border-color .2s,box-shadow .2s}
.campo textarea{min-height:130px;resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(11,143,229,.15)}
.campo input:user-invalid,.campo textarea:user-invalid{border-color:#d9534f}
.consentimiento{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--texto);margin:4px 0 22px}
.consentimiento input{margin-top:3px;width:18px;height:18px;accent-color:var(--azul);flex:none}
.consentimiento a{color:var(--azul)}
.boton{width:100%;border:0;cursor:pointer;padding:16px 24px;border-radius:999px;font:inherit;font-weight:800;font-size:14px;letter-spacing:1.4px;
  color:#fff;background:linear-gradient(135deg,var(--azul),var(--azul-noche));box-shadow:0 12px 26px -12px rgba(10,55,97,.8);transition:transform .2s,filter .2s}
.boton:hover,.boton:focus-visible{transform:translateY(-1px);filter:brightness(1.08)}
.form-estado{margin:14px 0 0;font-size:14px!important;text-align:center}
.form-estado.ok{color:#23803a}
.form-estado.error{color:#b3261e}

/* ---------- Pie ---------- */

.pie{background:var(--azul-noche);color:#cfe3f3;padding:44px max(7vw,24px)}
.pie-inner{max-width:var(--ancho);margin:auto;display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.pie img{width:150px;height:auto;display:block;background:#fff;border-radius:10px;padding:8px 12px}
.pie nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.pie a{color:#fff;text-decoration:none;font-size:14px}
.pie a:hover{text-decoration:underline}
.pie small{font-size:13px;width:100%;opacity:.75}

/* ---------- Accesibilidad ---------- */

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--cian);outline-offset:3px}
.salto{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:var(--azul-noche);padding:10px 16px;border-radius:8px;font-weight:700}
.salto:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Móvil ---------- */

@media (max-width:800px){
  .corner-logo{width:118px}
  .topbar nav{gap:14px}
  .topbar nav a{font-size:11px;letter-spacing:1px}
  .topbar nav a:not(.nav-cta){display:none}
  .brand{top:44%;width:min(84vw,470px)}
  .hero-cta{padding:13px 24px;font-size:12px}
  .contacto-grid{grid-template-columns:1fr}
  .fila{grid-template-columns:1fr;gap:0}
}