/* Plus Jakarta Sans autoalojada (variable 200-800), sin peticiones a Google Fonts */
@font-face { font-family: 'Plus Jakarta Sans'; src: url(app/fonts/jakarta.woff2) format('woff2-variations'); font-weight: 200 800; font-display: swap; }
/* Piezas comunes de la web pública (portada, deca-*.html y legales): pie, aviso de cookies, flecha y ventana de email.
   Usa los tokens de color de cada página (--asfalto, --azul, --papel…). */

/* ---------- Pie ---------- */
.pie-web { margin-top:0; padding:56px 0 0; background:var(--asfalto); color:#B9C7D8; font-size:14.5px; }
.pie-web a { color:#fff; text-decoration:none; }
.pie-web a:hover { color:#9ECDF2; }
.pie-rejilla { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; }
.pie-marca { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.pie-marca img { height:24px; display:block; }
.pie-marca .tag { padding:5px 9px 4px; border-radius:8px; background:#fff; color:var(--asfalto); font-size:13px; font-weight:800; line-height:1; }
.pie-lema { margin:0 0 20px; max-width:34ch; line-height:1.6; }
.pie-tel { display:inline-flex; align-items:center; gap:10px; padding:11px 18px; border-radius:14px; background:rgba(255,255,255,.08); font-weight:800; font-size:17px; letter-spacing:-.01em; }
.pie-tel:hover { background:rgba(255,255,255,.14); }
.pie-col h2, .pie-col h4 { margin:4px 0 16px; color:#fff; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.pie-col ul { list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.pie-col a { color:#B9C7D8; font-weight:600; }
.pie-col a:hover { color:#fff; }
.pie-col .horario { color:#8FA1B6; font-size:13.5px; line-height:1.55; }
.pie-legal { display:flex; justify-content:space-between; align-items:center; gap:12px 24px; flex-wrap:wrap; padding:22px 0 26px; border-top:1px solid rgba(255,255,255,.12); color:#8FA1B6; font-size:13px; }
.pie-legal nav { display:flex; gap:20px; flex-wrap:wrap; }
.pie-legal a { color:#B9C7D8; font-weight:600; }
.pie-legal button { padding:0; border:0; background:none; color:#B9C7D8; font:inherit; font-weight:600; cursor:pointer; }
.pie-legal button:hover { color:#fff; }
@media (max-width: 900px) {
  .pie-web { padding-top:44px; }
  .pie-rejilla { grid-template-columns:1fr 1fr; gap:32px 20px; }
  .pie-col.marca { grid-column:1 / -1; }
  .pie-legal { flex-direction:column; align-items:flex-start; }
}

/* ---------- Aviso de cookies: barra flotante abajo ---------- */
.cookies-barra { position:fixed; z-index:60; left:50%; bottom:20px; transform:translateX(-50%); width:min(760px, calc(100vw - 24px));
  display:flex; align-items:center; gap:16px; padding:16px 16px 16px 20px; border-radius:24px; background:rgba(255,255,255,.97);
  backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); border:1px solid var(--linea);
  box-shadow:0 24px 60px rgba(16,35,58,.20); color:var(--tinta); font-size:14.5px; line-height:1.5; }
.cookies-barra[hidden] { display:none; }
.cookies-ico { flex:none; width:44px; height:44px; border-radius:14px; background:var(--cielo-s, #E7F1FB); color:var(--azul); display:flex; align-items:center; justify-content:center; }
.cookies-txt { flex:1; min-width:0; }
.cookies-txt b { display:block; font-size:15px; margin-bottom:1px; }
.cookies-txt span { color:var(--hormigon-2); }
.cookies-txt a { color:var(--azul); font-weight:700; }
.cookies-ok { flex:none; min-height:46px; padding:0 22px; border:0; border-radius:14px; background:var(--azul); color:#fff; font:inherit; font-size:15px; font-weight:800; cursor:pointer; }
.cookies-ok:hover { background:var(--azul-2, #2569A5); }
/* Aceptar y Rechazar con el mismo peso visual (criterio de la AEPD). */
.cookies-btns { flex:none; display:flex; gap:8px; }
@media (prefers-reduced-motion: no-preference) {
  .cookies-barra:not([hidden]) { animation:cookies-entra .45s cubic-bezier(.2,.9,.3,1.1) both; }
  .cookies-barra.sale { animation:cookies-sale .25s ease-in both; }
  @keyframes cookies-entra { from { transform:translate(-50%, 32px); } to { transform:translate(-50%, 0); } }
  @keyframes cookies-sale { to { opacity:0; transform:translate(-50%, 16px); } }
}
@media (max-width: 640px) {
  .cookies-barra { bottom:calc(10px + env(safe-area-inset-bottom)); flex-wrap:wrap; gap:12px; padding:16px; border-radius:22px; }
  .cookies-ico { width:38px; height:38px; border-radius:12px; }
  .cookies-txt { flex-basis:calc(100% - 54px); }
  .cookies-btns { width:100%; }
  .cookies-ok { flex:1; }
}
@media print { .cookies-barra { display:none !important; } }

/* ---------- Volver arriba ---------- */
.arriba { position:fixed; z-index:55; right:24px; bottom:24px; width:52px; height:52px; border:0; border-radius:50%; background:var(--asfalto); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 12px 30px rgba(16,35,58,.28);
  opacity:0; transform:translateY(16px) scale(.9); pointer-events:none; transition:opacity .3s, transform .35s cubic-bezier(.2,.9,.3,1.3), background .15s; }
.arriba.ver { opacity:1; transform:none; pointer-events:auto; }
.arriba { border:1.5px solid rgba(255,255,255,.22); }
.arriba:hover { background:var(--azul); transform:translateY(-3px); }
.arriba:focus-visible { outline:3px solid #6FB4E8; outline-offset:3px; }
/* En el móvil el aviso de cookies ocupa el ancho: mientras está, la flecha se aparta. */
@media (max-width: 640px) { .arriba { right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); width:48px; height:48px; } body.con-aviso .arriba { opacity:0; pointer-events:none; } }
@media (prefers-reduced-motion: reduce) { .arriba { transition:none; } }
@media print { .arriba { display:none !important; } }

/* ---------- Común a todas las webs: ventana «¿Te enviamos información?» (ver web.js) ----------
   Copia de herramientas-comunes/emergente-email/emergente-email.css. Colores de DeCA: botón azul #2A6FAD con texto
   blanco (5,3:1), campo e icono sobre --cielo-s, marcador gris #5B6B7D (4,8:1 sobre el campo). Va encima del aviso de
   cookies (z-index 60), del WhatsApp (56) y de la flecha (55). */
.emergente { --em-acento:var(--azul, #2A6FAD); --em-suave:var(--cielo-s, #E7F1FB); --em-txt:var(--azul, #2A6FAD); --em-tinta:var(--tinta, #10233A); --em-gris:var(--hormigon-2, #5B6B7D); }
/* ---------- Común a todas las webs: modal «¿Te enviamos información?» (ver emergente-email.js) ----------
   Cabecera con degradado de la marca (sobre con carta, avión de papel, burbujas y sello «Gratis · Sin compromiso»),
   ventajas con check y formulario. Cada web define sus colores en .emergente (si no, salen grises): --em-acento (botón y
   degradado; con texto blanco en negrita de 18,7 px necesita 3:1), --em-suave (campo y checks), --em-txt (enlaces),
   --em-tinta (títulos y final del degradado), --em-gris. */
.emergente { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; }
.emergente[hidden] { display: none; }
.em-fondo { position: absolute; inset: 0; background: rgba(10, 16, 28, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s; }
.em-caja { position: relative; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 28px; background: #fff; color: var(--em-tinta, #1F2328);
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);
  opacity: 0; transform: translateY(30px) scale(.94); transition: opacity .35s, transform .55s cubic-bezier(.2, .9, .25, 1.15); }
.emergente.visible .em-fondo, .emergente.visible .em-caja { opacity: 1; }
.emergente.visible .em-caja { transform: none; }
html.em-abierto { overflow: hidden; }
.em-cerrar { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .2); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .2s, transform .2s; }
.em-cerrar:hover { background: rgba(255, 255, 255, .34); transform: rotate(90deg); }
.em-cerrar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* Cabecera ilustrada */
.em-cabeza { position: relative; height: 170px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .28), transparent 60%), linear-gradient(135deg, var(--em-acento, #3A4250), var(--em-tinta, #1F2328)); }
.em-cabeza::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .16) 1.2px, transparent 1.3px); background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.em-burbuja { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.em-burbuja.b1 { width: 180px; height: 180px; left: -60px; bottom: -90px; }
.em-burbuja.b2 { width: 110px; height: 110px; right: -30px; top: -40px; }
.em-burbuja.b3 { width: 34px; height: 34px; right: 90px; bottom: 24px; background: rgba(255, 255, 255, .2); }
.em-sobre { position: relative; z-index: 1; width: 150px; height: auto; margin-top: 14px; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .28)); }
.em-sobre .em-l1 { fill: var(--em-acento, #3A4250); }
.em-sobre .em-l2 { fill: var(--em-suave, #E6E9EE); }
.em-pliegue { stroke: var(--em-suave, #E6E9EE); stroke-width: 2; fill: none; }
.em-avion { position: absolute; z-index: 1; width: 44px; height: 44px; left: calc(50% + 78px); top: 40px; transform: rotate(-8deg); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }
.em-sello { position: absolute; z-index: 1; left: 18px; top: 18px; padding: 7px 13px; border-radius: 999px; background: #fff; color: var(--em-tinta, #1F2328);
  font-size: 13px; font-weight: 800; letter-spacing: .01em; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .35); }

/* Cuerpo */
.em-cuerpo { padding: 24px 28px 26px; }
.emergente .em-titulo { margin: 0 0 8px; font-size: 25px; font-weight: 800; line-height: 1.18; letter-spacing: -.025em; color: var(--em-tinta, #1F2328); }
.emergente .em-titulo span { color: var(--em-txt, var(--em-acento, #1F2328)); }
.emergente .em-txt { margin: 0 0 14px; font-size: 15.5px; line-height: 1.55; color: var(--em-gris, #5B6470); }
.em-ventajas { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.em-ventajas[hidden] { display: none; }
.em-ventajas li { position: relative; padding-left: 30px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--em-tinta, #1F2328); }
.em-ventajas li::before { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--em-suave, #EEF1F4); }
.em-ventajas li::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border: solid var(--em-txt, #1F2328); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.em-fila { display: flex; gap: 8px; padding: 6px; border-radius: 16px; background: var(--em-suave, #EEF1F4); transition: box-shadow .2s; }
.em-fila:focus-within { box-shadow: 0 0 0 2px var(--em-acento, #1F2328); }
.em-campo { flex: 1; min-width: 0; }
.em-campo input { width: 100%; height: 50px; padding: 0 12px; border: 0; border-radius: 11px; background: transparent; color: var(--em-tinta, #1F2328); font: inherit; font-size: 16px; }
.em-campo input::placeholder { color: var(--em-gris, #5B6470); opacity: 1; }
.em-campo input:focus { outline: 0; }
.em-enviar { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 50px; padding: 0 20px; border: 0; border-radius: 11px; background: var(--em-acento, #1F2328); color: #fff;
  font: inherit; font-size: 18.7px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 22px -10px var(--em-acento, #1F2328); transition: filter .2s, transform .2s; }
.em-enviar::after { content: "→"; transition: transform .2s; }
.em-enviar:hover { filter: brightness(.93); transform: translateY(-1px); }
.em-enviar:hover::after { transform: translateX(3px); }
.em-form.enviando .em-enviar { opacity: .6; pointer-events: none; }
.em-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13.5px; line-height: 1.4; color: var(--em-gris, #5B6470); cursor: pointer; }
.em-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--em-acento, #1F2328); }
.em-check a { color: var(--em-txt, #1F2328); font-weight: 700; }
.emergente .em-error { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: #C73A30; }
.emergente .em-error:empty { display: none; }
.em-trampa, .em-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.em-ok { display: flex; gap: 14px; align-items: center; padding: 6px 0 2px; }
.em-ok[hidden] { display: none; }
.em-ok svg { width: 46px; height: 46px; padding: 10px; flex: none; border-radius: 50%; background: var(--em-acento, #1F2328); fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.emergente .em-ok p { margin: 0; font-size: 15.5px; color: var(--em-gris, #5B6470); }
.em-ok b { color: var(--em-tinta, #1F2328); }
@media (prefers-reduced-motion: no-preference) {
  .emergente.visible .em-avion { animation: em-vuela 3.2s ease-in-out .3s infinite; }
  .emergente.visible .em-sobre { animation: em-flota 4s ease-in-out infinite; }
  @keyframes em-vuela { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 50% { transform: translate(10px, -8px) rotate(-2deg); } }
  @keyframes em-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
}
@media (max-width: 520px) {
  .emergente { padding: 12px; }
  .em-caja { max-height: calc(100dvh - 24px); border-radius: 24px; }
  .em-cabeza { height: 130px; }
  .em-sobre { width: 116px; }
  .em-avion { left: calc(50% + 58px); top: 30px; width: 36px; height: 36px; }
  .em-cuerpo { padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); }
  .emergente .em-titulo { font-size: 21px; }
  .em-fila { flex-direction: column; }
  .em-enviar { justify-content: center; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .em-fondo, .em-caja { transition: none; } }
@media print { .emergente { display: none !important; } }

/* Redes sociales de Infonet (común a todas las webs) */
.pie-col .redes { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.pie-col .redes a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff; transition: background .2s, transform .2s; }
.pie-col .redes a:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.pie-col .redes svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pie-col .redes li + li { margin-top: 0; }