/* Agua El Rico Sabor A. · la tienda
   ---------------------------------------------------------------------------
   Los colores están medidos del material del propio cliente (scripts/fotos.py
   los sacó de la etiqueta del botellón y del póster de la bolsa con válvula):
   el marino de la gota, el cobalto del rótulo y el celeste del agua. Fondo
   blanco, como pide Jean, y el verde de hoja solo aparece en trazos, del
   tamaño de una hoja, porque el cliente pidió «que se vea a naturaleza».

   Fabián pidió bordes curvos en botones y fichas: las tarjetas van a 22 px y
   los botones son píldoras.
*/

@font-face{font-family:'Baloo';src:url('/fuentes/baloo-2.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'Figtree';src:url('/fuentes/figtree.woff2') format('woff2');font-weight:300 700;font-display:swap}

:root{
  --blanco:#FFFFFF;
  --bruma:#EEF5FC;         /* el celeste más pálido: fondos de sección */
  --cielo:#D7E8FA;
  --celeste:#0A74D6;
  --cobalto:#1740C2;       /* el azul del rótulo: acciones */
  --marino:#0A1C6B;        /* el azul de la gota: títulos */
  --hoja:#1F8A4C;
  --tinta:#10203F;
  --tinta2:#46567A;
  --tinta3:#6C7A99;
  --linea:#DCE6F4;
  --linea2:#BFD3EC;
  --mal:#B3261E;
  --mal-suave:#FDECEA;
  --ok-suave:#E6F6EC;
  --sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --titulo:'Baloo','Figtree',system-ui,sans-serif;
  --r:22px;
  --rs:14px;
  --sombra:0 14px 34px -22px rgba(10,28,107,.45);
  --ancho:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--blanco);color:var(--tinta);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  min-height:100dvh;display:flex;flex-direction:column;
}
/* Solo crece para empujar el pie hasta abajo. Nada de `display:flex` aquí:
   con las secciones centradas por `margin:0 auto`, el margen automático anula
   el estirado del flex y cada sección se encoge al ancho de su contenido. */
main{flex:1 0 auto}
::selection{background:var(--cielo);color:var(--marino)}
/* Los anclas (#productos) quedan debajo de la cabecera fija si no se avisa. */
[id]{scroll-margin-top:88px}
body.con-flotante{padding-bottom:84px}
img{max-width:100%;display:block}
a{color:var(--cobalto)}
button,input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--celeste);outline-offset:2px;border-radius:6px}

h1,h2,h3{font-family:var(--titulo);font-weight:700;line-height:1.15;letter-spacing:-.01em;color:var(--marino);margin:0}
h1{font-size:clamp(30px,5.4vw,50px)}
h2{font-size:clamp(24px,3.4vw,34px)}
h3{font-size:19px}

.saltar{position:absolute;left:-9999px;top:0;background:var(--marino);color:#fff;padding:12px 18px;border-radius:0 0 var(--rs) 0;z-index:80}
.saltar:focus{left:0}

/* ---------------------------------------------------------------- cabecera -- */
.cabecera{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.cabecera-in{max-width:var(--ancho);margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:12px}
.marca{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--marino);flex:none;min-width:0}
.marca-gota{width:26px;height:33px;flex:none;fill:var(--cobalto)}
.marca-gota .brillo{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;opacity:.85}
.marca-txt{font-family:var(--titulo);font-weight:800;font-size:17px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bolsa{margin-left:auto;position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bruma);color:var(--marino);flex:none}
.bolsa svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bolsa:hover{background:var(--cielo)}
.bolsa-n{position:absolute;top:-2px;right:-2px;min-width:21px;height:21px;padding:0 6px;border-radius:11px;background:var(--cobalto);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}

/* El selector de la cabecera es el mismo estado que el del héroe, en chiquito. */
.cabecera-modo{display:flex;gap:3px;padding:3px;border-radius:999px;background:var(--bruma);flex:none}
.cabecera-modo button{border:0;background:none;padding:7px 13px;border-radius:999px;font-size:13px;font-weight:600;color:var(--tinta2);cursor:pointer;white-space:nowrap}
.cabecera-modo button[aria-checked="true"]{background:var(--cobalto);color:#fff}
/* En un celular angosto no caben la marca, el selector y la bolsa en una
   fila: el selector se baja a la suya y ocupa el ancho. Antes la bolsa se
   salía por el borde derecho a 360 px. */
@media (max-width:460px){
  .cabecera-in{flex-wrap:wrap;row-gap:8px;padding-bottom:8px}
  .marca-txt{font-size:15px}
  .cabecera-modo{order:3;width:100%;justify-content:stretch}
  .cabecera-modo button{flex:1;padding:8px 10px;font-size:12.5px}
}

/* ------------------------------------------------------------------ héroe -- */
.heroe{position:relative;background:linear-gradient(180deg,var(--bruma) 0%,#F7FBFF 62%,var(--blanco) 100%);padding:34px 18px 96px;overflow:hidden}
.heroe-in{max-width:var(--ancho);margin:0 auto;display:grid;gap:26px;align-items:center}
@media (min-width:880px){
  .heroe{padding:56px 18px 120px}
  .heroe-in{grid-template-columns:1.05fr .95fr;gap:40px}
}
.sobre{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--celeste)}
.bajada{margin:14px 0 0;font-size:17px;color:var(--tinta2);max-width:46ch}
.pregunta{margin:22px 0 8px;font-family:var(--titulo);font-weight:700;font-size:18px;color:var(--marino)}
.modo-nota{margin:10px 0 0;font-size:14px;color:var(--tinta2);display:flex;align-items:center;gap:8px}
.modo-nota::before{content:'';width:16px;height:16px;flex:none;border-radius:50%;background:var(--ok-suave);
  box-shadow:inset 0 0 0 2px var(--hoja)}
.insignias{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.insignias li{display:flex;align-items:center;gap:7px;padding:7px 14px 7px 11px;border-radius:999px;
  background:var(--blanco);box-shadow:inset 0 0 0 1px var(--linea);font-size:13px;font-weight:600;color:var(--tinta2)}
.insignias li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--celeste);flex:none}

.heroe-foto{margin:0;justify-self:center}
.heroe-foto img{width:min(380px,74vw);height:auto;border-radius:var(--r);
  filter:drop-shadow(0 26px 30px rgba(10,28,107,.18))}

/* La línea de agua: dos olas que se corren un poco con el scroll (catalogo.js). */
.linea-agua{position:absolute;left:-4%;right:-4%;bottom:-1px;width:108%;height:92px;display:block}
.ola{transition:transform .18s linear}
.ola--atras{fill:var(--cielo);opacity:.75}
.ola--frente{fill:var(--blanco)}
@media (prefers-reduced-motion:reduce){.ola{transition:none}}

/* El selector grande: es la decisión que cambia todos los precios, así que se
   ve como dos tarjetas y no como un interruptor escondido. */
.modo{display:grid;gap:10px;grid-template-columns:1fr;max-width:520px}
@media (min-width:440px){.modo{grid-template-columns:1fr 1fr}}
.modo button{position:relative;text-align:left;padding:14px 16px 14px 46px;border:2px solid var(--linea);border-radius:var(--rs);
  background:var(--blanco);cursor:pointer;display:block}
.modo button::before{content:'';position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;border:2px solid var(--linea2);background:var(--blanco)}
.modo button[aria-checked="true"]{border-color:var(--cobalto);background:var(--bruma)}
.modo button[aria-checked="true"]::before{border-color:var(--cobalto);box-shadow:inset 0 0 0 4px var(--blanco);background:var(--cobalto)}
.modo b{display:block;font-family:var(--titulo);font-size:16.5px;color:var(--marino);line-height:1.25}
.modo small{display:block;font-size:13px;color:var(--tinta3)}
.seccion--angosta .modo{margin-bottom:8px}

/* --------------------------------------------------------------- secciones -- */
.seccion{max-width:var(--ancho);margin:0 auto;padding:40px 18px}
.seccion--angosta{max-width:760px}
.seccion-cab{margin:0 0 22px}
.seccion-cab p{margin:6px 0 0;color:var(--tinta2);font-size:15px}
.seccion--productos{padding-top:12px}
.titulo-pagina{margin:0 0 18px}
.titulo-pagina--centro{text-align:center}

.rejilla{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

/* --------------------------------------------------------------- tarjetas -- */
.tarjeta{display:flex;flex-direction:column;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sombra);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.tarjeta:hover{transform:translateY(-3px);border-color:var(--linea2);box-shadow:0 22px 40px -26px rgba(10,28,107,.55)}
.tarjeta-foto{display:block;background:var(--bruma);aspect-ratio:4/5;overflow:hidden}
.tarjeta-foto img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.tarjeta:hover .tarjeta-foto img{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){
  .tarjeta,.tarjeta-foto img{transition:none}
  .tarjeta:hover{transform:none}
  .tarjeta:hover .tarjeta-foto img{transform:none}
}
.tarjeta-cuerpo{padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.tarjeta-nombre{font-size:20px}
.tarjeta-nombre a{color:inherit;text-decoration:none}
.tarjeta-nombre a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.tarjeta-contenido{margin:0;font-size:13.5px;color:var(--tinta3)}
.tarjeta--no{opacity:.72}
.no-disponible{margin:auto 0 0;padding:12px;border-top:1px solid var(--linea);border-radius:0;border-radius:999px;background:var(--bruma);color:var(--tinta2);font-size:13.5px;font-weight:600;text-align:center}
.no-disponible--grande{display:inline-block;margin:14px 0;padding:10px 16px;border:0;border-radius:999px;background:var(--bruma);color:var(--tinta2)}

.sin-foto{display:grid;place-items:center;width:100%;height:100%;background:var(--bruma)}
.sin-foto--grande{border-radius:var(--r);aspect-ratio:4/5}
.gota-dibujo{width:44%;height:auto;fill:var(--cielo)}
.gota-dibujo .brillo{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round}

/* Botones pequeños, no una cuadrícula (lección de VELOX). */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0}
.chip{border:1px solid var(--linea2);background:var(--blanco);color:var(--tinta2);border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:600;cursor:pointer;line-height:1.3}
.chip:hover{border-color:var(--celeste)}
.chip[aria-pressed="true"]{background:var(--marino);border-color:var(--marino);color:#fff}
.chips--sabor .chip{font-weight:500}
.chips .chip[tabindex="-1"]{cursor:default;background:var(--bruma);border-color:var(--bruma);color:var(--marino)}
.chips--falta{outline:2px solid var(--mal);outline-offset:4px;border-radius:12px}

.precio{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--linea);display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.precio-grande{font-family:var(--titulo);font-weight:800;font-size:28px;color:var(--marino);line-height:1}
.precio-modo{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--celeste)}
.precio-otro{flex-basis:100%;font-size:13px;color:var(--tinta3)}
.precio--ficha{margin-top:4px;border-top:0;padding-top:0}
.precio--ficha .precio-grande{font-size:38px}

.tarjeta-accion{padding-top:10px;display:flex;gap:10px;align-items:center}
.contador{display:flex;align-items:center;gap:2px;border:1px solid var(--linea2);border-radius:999px;padding:2px;flex:none}
.contador button{width:34px;height:34px;border:0;border-radius:50%;background:var(--bruma);color:var(--marino);font-size:19px;line-height:1;cursor:pointer}
.contador button:hover{background:var(--cielo)}
.contador output{min-width:30px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.contador--chico button{width:30px;height:30px;font-size:17px}

/* ---------------------------------------------------------------- botones -- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:999px;
  background:var(--cobalto);color:#fff;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;text-align:center;
  box-shadow:0 10px 22px -14px rgba(23,64,194,.9);transition:background .15s ease,transform .15s ease}
.btn:hover{background:var(--marino)}
.btn:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}
.btn--linea{background:var(--blanco);color:var(--marino);box-shadow:inset 0 0 0 2px var(--linea2)}
.btn--linea:hover{background:var(--bruma);color:var(--marino)}
.btn--agregar{flex:1;min-height:44px;padding:0 14px}
.btn--grande{width:100%;min-height:54px;font-size:16px}
.btn[aria-disabled="true"]{background:var(--linea2);color:#fff;cursor:not-allowed}
.btn:disabled{opacity:.6;cursor:progress}
.acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.acciones .btn{flex:1 1 200px}

/* ------------------------------------------------------ cómo pedir y visita -- */
.seccion--pasos{background:var(--bruma);border-radius:var(--r);max-width:calc(var(--ancho) - 36px);padding:34px 26px}
.pasos{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:760px){.pasos{grid-template-columns:repeat(3,1fr);gap:22px}}
.pasos li{color:var(--tinta2);font-size:15px;line-height:1.55}
.paso-n{display:grid;place-items:center;width:34px;height:34px;margin:0 0 10px;border-radius:50%;
  background:var(--cobalto);color:#fff;font-family:var(--titulo);font-weight:800;font-size:17px}
.pasos b{display:block;color:var(--marino);font-size:16px;margin-bottom:2px}

.visita{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.visita-dato{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:18px 20px}
.visita-dato p{margin:0 0 4px;color:var(--tinta2)}
.visita-rotulo{display:block;margin-bottom:8px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--celeste)}
.enlace{display:inline-block;margin-top:6px;font-weight:600;text-underline-offset:3px}
.abierto{margin-top:10px !important;display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;background:var(--ok-suave);color:#14613a;font-size:13px;font-weight:600}
.abierto::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--hoja)}
.abierto--no{background:var(--bruma);color:var(--tinta2)}
.abierto--no::before{background:var(--tinta3)}

/* ------------------------------------------------------------------ ficha -- */
.migas{max-width:var(--ancho);margin:0 auto;padding:16px 18px 0;font-size:13.5px;color:var(--tinta3);display:flex;gap:8px;flex-wrap:wrap}
.migas a{color:var(--tinta2);text-decoration:none}
.migas a:hover{text-decoration:underline}
.ficha{max-width:var(--ancho);margin:0 auto;padding:18px 18px 10px;display:grid;gap:28px}
@media (min-width:880px){.ficha{grid-template-columns:1fr 1fr;gap:44px;align-items:start}}
.galeria{display:grid;gap:12px}
.galeria img{width:100%;border-radius:var(--r);background:var(--bruma)}
.galeria-pista{margin:8px 0 0;font-size:13px;color:var(--tinta3)}
.ficha-desc{margin:12px 0 18px;font-size:17px;color:var(--tinta2)}
.ficha-elegir{margin:18px 0 8px;padding:18px;border:1px solid var(--linea);border-radius:var(--r);background:var(--blanco);box-shadow:var(--sombra);display:flex;flex-direction:column;gap:10px}
.ficha-sub{margin:26px 0 10px;font-size:20px}
.precios{width:100%;border-collapse:collapse;font-size:15px}
.precios th,.precios td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--linea)}
.precios thead th{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta3)}
.precios tbody th{font-weight:600;color:var(--marino)}
.precios tbody th small{display:block;font-weight:400;font-size:12.5px;color:var(--tinta3)}
.precios td{font-variant-numeric:tabular-nums;color:var(--tinta2)}
.precios tbody tr:last-child th,.precios tbody tr:last-child td{border-bottom:0}

/* ---------------------------------------------------------------- carrito -- */
.lineas{list-style:none;margin:20px 0;padding:0;display:grid;gap:12px}
.linea{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid var(--linea);border-radius:var(--r);background:var(--blanco);flex-wrap:wrap}
.linea-foto img{width:64px;height:80px;object-fit:cover;border-radius:var(--rs);background:var(--bruma)}
.linea-txt{flex:1;min-width:140px}
.linea-txt b{display:block;font-size:16px;color:var(--marino)}
.linea-txt span{display:block;font-size:13px;color:var(--tinta3)}
.linea-txt .mal{color:var(--mal);font-style:normal;font-weight:600}
.linea-cant{display:flex;align-items:center;gap:12px;margin-left:auto}
.linea-total{font-family:var(--titulo);font-size:19px;color:var(--marino);min-width:78px;text-align:right}
.quitar{border:0;background:none;color:var(--tinta3);font-size:13.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px}
.quitar:hover{color:var(--mal)}
@media (max-width:520px){
  .linea-cant{width:100%;margin-left:0;justify-content:space-between}
}

.suma{margin-top:18px;padding:18px;border-radius:var(--r);background:var(--bruma)}
.suma p{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.suma p b{font-family:var(--titulo);font-size:28px;color:var(--marino)}
.suma .pista{display:block;margin-top:8px;font-size:13.5px;color:var(--tinta2)}
.pista{font-size:13.5px;color:var(--tinta3)}
.vacio{padding:48px 0 64px;text-align:center;color:var(--tinta2)}
.vacio-dibujo{width:74px;height:92px;margin:0 auto 16px;fill:var(--cielo)}
.vacio-dibujo .brillo{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round}
.vacio-titulo{font-family:var(--titulo);font-weight:700;font-size:22px;color:var(--marino);margin:0 0 6px}
.vacio p{margin:0 auto;max-width:34ch}
.acciones--centro{justify-content:center}
.acciones--centro .btn{flex:0 0 auto;min-width:220px}

/* ------------------------------------------------------------ formulario -- */
.formulario{margin-top:18px}
.campo{margin:0 0 16px}
.campo>label:not(.radio),.campo legend{display:block;margin:0 0 7px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta3)}
.opcional{font-weight:500;letter-spacing:0;text-transform:none;color:var(--tinta3)}
.campo input,.campo textarea{width:100%;min-height:52px;border:1px solid var(--linea2);border-radius:var(--rs);background:var(--blanco);padding:13px 15px;font-size:16px}
.campo textarea{min-height:76px;resize:vertical}
.campo input:focus,.campo textarea:focus{outline:0;border-color:var(--celeste);box-shadow:0 0 0 3px rgba(10,116,214,.16)}
.campo--radios{border:0;padding:0;margin:0 0 16px}
/* Los radios NO son campos de texto: la regla de ancho completo les cae encima
   y los desalinea (lección de VELOX). */
.campo--radios input{width:22px;min-height:0;height:22px;flex:none;accent-color:var(--cobalto)}
.radio{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--tinta);padding:12px 14px;margin-bottom:8px;border:1px solid var(--linea2);border-radius:var(--rs);cursor:pointer}
.radio:has(input:checked){border-color:var(--cobalto);background:var(--bruma)}
.radio b{display:block;font-size:15px;color:var(--marino)}
.radio small{display:block;font-size:13px;color:var(--tinta3)}
.recoger{padding:16px 18px;border-radius:var(--rs);background:var(--bruma);margin:0 0 16px}
.recoger b{color:var(--marino)}
.recoger p{margin:4px 0 0;font-size:14px;color:var(--tinta2)}
.suma--fija{margin-top:20px}
.suma--fija .btn{margin-top:14px}
.aviso{margin:10px 0 0;padding:11px 14px;border-radius:var(--rs);background:var(--mal-suave);color:#7A1C15;font-size:14px}

/* ------------------------------------------------------------------ acuse -- */
.acuse{text-align:center;padding:24px 0}
.acuse-gota{width:74px;height:92px;margin:0 auto 14px;fill:var(--cielo)}
.acuse-gota .chulo{fill:none;stroke:var(--cobalto);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.acuse p{color:var(--tinta2)}
.acuse .refe{display:inline-block;margin:14px 0 6px;padding:10px 20px;border-radius:999px;background:var(--marino);color:#fff;font-family:ui-monospace,Menlo,monospace;font-size:19px;letter-spacing:.06em}
.pago-caja{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:left;margin:18px 0;padding:18px;border-radius:var(--r);background:var(--bruma)}
.pago-caja img{border-radius:var(--rs)}
.pago-caja p{margin:2px 0}

/* -------------------------------------------------------------------- pie -- */
.pie{margin-top:48px;background:var(--marino);color:#C7D8F6;flex:none}
.pie-in{max-width:var(--ancho);margin:0 auto;padding:38px 18px 44px;display:grid;gap:26px;font-size:14.5px;
  grid-template-columns:1fr}
@media (min-width:760px){.pie-in{grid-template-columns:1.3fr 1fr 1fr;gap:34px}}
.pie-col p{margin:0 0 4px}
.pie-marca{display:flex;align-items:center;gap:10px;font-family:var(--titulo);font-weight:800;font-size:21px;color:#fff;margin:0 0 6px}
.pie-gota{width:22px;height:28px;fill:#7FB2F5;flex:none}
.pie-rotulo{display:block;margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7FB2F5}
.pie a{color:#fff;text-underline-offset:3px}
.pie .punto{margin:0 8px;color:#5E7FC0}
.pie-redes,.pie-enlaces{margin-top:10px}
.pie .btn--pie{margin-top:10px;background:#fff;color:var(--marino);min-height:44px;font-size:14px;box-shadow:none}
.pie .btn--pie:hover{background:var(--cielo);color:var(--marino)}

/* -------------------------------------------------------- barra flotante -- */
.flotante{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:50;
  display:flex;align-items:center;gap:14px;max-width:min(92vw,520px);
  padding:14px 22px;border-radius:999px;background:var(--cobalto);color:#fff;
  font-weight:700;text-decoration:none;box-shadow:0 16px 32px -14px rgba(10,28,107,.7)}
.flotante b{font-family:var(--titulo);font-size:19px;margin-left:auto}
.flotante svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.brindis{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;z-index:60;
  max-width:min(92vw,440px);padding:13px 20px;border-radius:var(--r);
  background:var(--marino);color:#fff;font-size:14.5px;text-align:center;box-shadow:var(--sombra)}
.brindis a{color:#9FC6FF;font-weight:700}
.brindis--mal{background:var(--mal)}

/* -------------------------------------------------------------- impresión -- */
@media print{
  .cabecera,.flotante,.brindis,.tarjeta-accion,.modo{display:none !important}
  body{padding:0}
}