/* Topsellia · web pública (inicio, servicios, contacto, legales). Sistema común.
   Sale de la /v3 (azul cobalto, Archivo ancha, IBM Plex Mono). Nada de precios en estas páginas. */
:root{
  --azul:#1f3dff; --azul-osc:#1530d6; --azul-2:#e9ecff; --azul-claro:#8ea0ff;
  --negro:#0b0b0b; --negro-2:#16161b; --blanco:#fafafa; --papel:#ffffff;
  --gris3:#5b5f6b; --gris-osc:#a9abb6; --linea3:#d9dbe3; --linea-osc:#26262c;
  --amarillo:#ffd23f; --rojo:#d0213b;
  --ancha:"Archivo",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1); --r:10px;
  --env:1320px; --gutter:clamp(16px,4vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{background:var(--blanco);color:var(--negro);font-family:var(--ancha);font-variation-settings:"wdth" 100;font-size:clamp(16px,1.05vw,18px);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--azul);color:#fff}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.oscuro :focus-visible,.final3 :focus-visible{outline-color:var(--amarillo)}
.v3-env{max-width:var(--env);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}
.ancho{font-family:var(--ancha);font-variation-settings:"wdth" 125;font-weight:800;letter-spacing:-.02em;line-height:.95}
.saltar{position:absolute;left:12px;top:-60px;z-index:100;background:var(--negro);color:#fff;padding:13px 14px;font-family:var(--mono);font-size:.8rem}
.saltar:focus{top:12px}

/* botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.8em;min-height:48px;font-family:var(--mono);font-weight:600;font-size:.92rem;letter-spacing:.02em;text-transform:uppercase;
  padding:1em 1.5em;background:var(--azul);color:#fff;text-decoration:none;border:0;cursor:pointer;transition:background .25s,transform .25s}
.boton:hover{background:var(--negro);transform:translateY(-2px)}
.boton--blanco{background:#fff;color:var(--negro)}.boton--blanco:hover{background:var(--negro);color:#fff}
.boton--linea{background:transparent;color:currentColor;box-shadow:inset 0 0 0 1.5px currentColor}.boton--linea:hover{background:var(--negro);color:#fff;box-shadow:none}
.boton i{font-style:normal;transition:transform .25s}.boton:hover i{transform:translateX(4px)}

/* cabecera */
.v3-cab{position:sticky;top:0;z-index:50;background:rgba(250,250,250,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linea3)}
.v3-cab .v3-env{display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px}
.v3-marca{font-family:var(--ancha);font-variation-settings:"wdth" 125;font-weight:900;font-size:1.25rem;letter-spacing:-.03em;text-decoration:none;color:var(--negro);display:flex;align-items:center;gap:8px;min-height:44px}
.v3-marca::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--azul);box-shadow:inset 0 0 0 4px var(--azul),inset 0 0 0 9px #fff}
.menu{display:flex;gap:clamp(14px,2vw,28px);list-style:none}
.menu a{display:inline-flex;align-items:center;min-height:44px;color:var(--negro);text-decoration:none;font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid transparent}
.menu a:hover{color:var(--azul)}
.menu a[aria-current="page"]{color:var(--azul);border-bottom-color:var(--azul)}
.v3-cab .boton{padding:.75em 1.1em;font-size:.76rem;min-height:44px}
.abre-menu{display:none;align-items:center;gap:10px;min-height:44px;padding:0 14px;background:transparent;border:1.5px solid var(--negro);font-family:var(--mono);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;color:var(--negro)}
.abre-menu span{display:block;width:16px;height:2px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}
@media(max-width:1100px){
  .abre-menu{display:inline-flex}
  .v3-cab .cab-cta{display:none}
  .v3-cab nav{position:fixed;left:0;right:0;top:66px;bottom:0;background:var(--negro);padding:28px var(--gutter) 40px;display:none;overflow-y:auto}
  .v3-cab.abierto nav{display:block;height:calc(100vh - 66px);height:calc(100dvh - 66px)}
  /* backdrop-filter convierte la cabecera en el contenedor del menú fijo y lo recorta: se quita al abrir */
  .v3-cab.abierto{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--blanco)}
  .menu{flex-direction:column;gap:0}
  .menu li{border-bottom:1px solid var(--linea-osc)}
  .menu a{display:flex;color:#fff;font-family:var(--ancha);font-variation-settings:"wdth" 125;font-weight:800;font-size:clamp(26px,7vw,40px);text-transform:none;letter-spacing:-.02em;padding:14px 0;border:0}
  .menu a[aria-current="page"]{color:var(--azul-claro)}
  .v3-cab nav .boton{margin-top:28px;width:100%}
}
@media(min-width:1101px){.v3-cab nav .boton{display:none}}

/* pie */
.pie{background:var(--negro);color:var(--gris-osc);padding:clamp(56px,7vw,90px) 0 calc(28px + env(safe-area-inset-bottom))}
.pie__rejilla{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(28px,4vw,64px)}
.pie .v3-marca{color:#fff}
.pie .v3-marca::before{box-shadow:inset 0 0 0 4px var(--azul),inset 0 0 0 9px var(--negro)}
.pie p{max-width:34ch;margin-top:14px}
.pie h2{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;font-weight:600;margin-bottom:12px}
.pie ul{list-style:none}
.pie li a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--gris-osc)}
.pie li a:hover{color:#fff}
.pie__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:clamp(40px,6vw,70px);padding-top:22px;border-top:1px solid var(--linea-osc);font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}
@media(max-width:1000px){.pie__rejilla{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.pie__rejilla{grid-template-columns:1fr}}
.pie .pie__titular{margin-top:18px;font-size:.78rem;line-height:1.55;color:var(--gris-osc);max-width:none}
.pie .pie__titular a{color:inherit}

/* huecos marcados (datos que faltan) */
.pendiente{display:inline-block;background:#fff4c2;color:#5a4300;border:1.5px dashed #b08900;padding:.15em .5em;font-family:var(--mono);font-size:.78em;letter-spacing:.02em;text-transform:none;border-radius:4px}
.oscuro .pendiente,.pie .pendiente{background:#2a2410;color:#ffe08a;border-color:#ffd23f}

/* cabeza de página interior */
.portada{padding:clamp(40px,6vw,90px) 0 clamp(40px,6vw,80px)}
.portada .rotulo{color:var(--azul);margin-bottom:1.1rem}
.portada h1{font-size:clamp(44px,8vw,132px)}
.portada h1 span{color:var(--azul)}
.portada .entradilla{color:var(--gris3);font-size:clamp(1.05rem,1.4vw,1.25rem);max-width:40ch;margin-top:1.4rem}
.portada .acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}

/* formulario */
.form-zona{background:var(--negro);color:#fff;padding:clamp(70px,10vw,140px) 0}
.form-zona .v3-env{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,100px);align-items:start}
.form-zona h2{font-size:clamp(38px,5vw,80px)}
.form-zona h2 span{color:var(--azul-claro)}
.form-zona .lado p{color:var(--gris-osc);max-width:36ch;margin-top:1.2rem}
.contacto-directo{display:grid;gap:10px;margin-top:2rem;max-width:360px}
.contacto-directo a,.contacto-directo .fila{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 18px;border:1px solid var(--linea-osc);text-decoration:none;color:#fff;font-family:var(--mono);font-size:.85rem}
.contacto-directo a:hover{border-color:#fff}
.contacto-directo b{color:var(--azul-claro);font-weight:600;min-width:84px}
@media(max-width:900px){.form-zona .v3-env{grid-template-columns:minmax(0,1fr)}}
.formulario{background:#fff;color:var(--negro);padding:clamp(22px,3.5vw,44px);display:grid;gap:18px}
.formulario .dos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.formulario .dos{grid-template-columns:1fr}}
.campo{display:grid;gap:6px}
.campo label{font-weight:700;font-size:.95rem}
.campo label small{font-weight:400;color:var(--gris3)}
.campo input,.campo select,.campo textarea{width:100%;font:inherit;font-size:16px;color:var(--negro);background:#fff;border:1.5px solid #8b8f9c;border-radius:0;padding:12px 14px;min-height:50px;-webkit-appearance:none;appearance:none}
.campo select{background-image:linear-gradient(45deg,transparent 50%,var(--negro) 50%),linear-gradient(135deg,var(--negro) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.campo textarea{min-height:110px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:3px solid var(--azul);outline-offset:0;border-color:var(--azul)}
.campo .prefijo{display:flex}
.campo .prefijo span{display:grid;place-items:center;padding:0 12px;border:1.5px solid #8b8f9c;border-right:0;background:var(--azul-2);font-family:var(--mono);font-size:.9rem}
.campo [aria-invalid="true"]{border-color:var(--rojo)}
.campo .error{color:var(--rojo);font-size:.85rem;display:none}
.campo [aria-invalid="true"]~.error,.campo .prefijo:has([aria-invalid="true"])~.error{display:block}
.casilla{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-size:.92rem;color:#2a2c33}
.casilla input{width:22px;height:22px;margin-top:2px;accent-color:var(--azul)}
.casilla a{color:var(--azul)}
.capa{font-size:.82rem;color:var(--gris3);border-top:1px solid var(--linea3);padding-top:14px}
.capa a{color:var(--azul)}
.formulario .boton{width:100%;min-height:56px;font-size:1rem}
.formulario .boton[disabled]{opacity:.6;cursor:wait}
.trampa{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.aviso-form{display:none;padding:14px 16px;font-size:.95rem}
.aviso-form.error{display:block;background:#ffe9ec;color:#7a0d1e;border-left:4px solid var(--rojo)}
.gracias{display:none;text-align:left;padding:clamp(28px,4vw,48px);background:#fff;color:var(--negro)}
.gracias.visible{display:block}
.gracias .ancho{font-size:clamp(34px,4.6vw,60px);color:var(--azul)}
.gracias p{margin-top:1rem;color:var(--gris3);max-width:40ch}

/* entrada suave: el estado final está en CSS, la animación es adorno */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .aparece{animation:aparece linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
  }
}
@keyframes aparece{from{opacity:.2;transform:translateY(30px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}