/* ==========================================================================
   FreshTec — aviso de la portada y botones de redes sociales

   El aviso va arriba y centrado, no abajo: abajo ya viven el aviso de
   consentimiento y el botón de WhatsApp, y tres cosas flotando en la misma
   esquina se tapan entre ellas.

   Entra y sale con una animación corta. Dura unos segundos, así que sin ella
   aparecería y desaparecería de golpe, que se lee como un parpadeo de la
   página y no como un aviso.

   Los botones de redes viven en este archivo aunque también los use el pie de
   página: son los mismos círculos de color, y separarlos en dos hojas termina
   con los dos juegos pintados distinto.
   ========================================================================== */

.aviso-portada{
    position:fixed;
    top:16px;
    left:50%;
    transform:translateX(-50%);
    z-index:9998;
    display:flex;
    align-items:stretch;
    /* Ancho tope: desde que el contenido es HTML puede traer un párrafo largo
       o una imagen ancha, y sin esto el aviso se estiraba de lado a lado de la
       pantalla y dejaba de leerse como un recuadro. */
    width:max-content;
    max-width:min(420px, calc(100% - 24px));
    background:var(--superficie, #fff);
    border:1px solid var(--borde, #e5e7eb);
    border-radius:var(--radio, 14px);
    box-shadow:var(--sombra-alta, 0 12px 28px -12px rgba(15,23,42,.28));
    overflow:hidden;
    animation:aviso-portada-entra .28s ease-out;
}

.aviso-portada[hidden]{ display:none; }

/* La clase la pone el JS un instante antes de esconderlo, para que la salida
   se vea; el `hidden` llega cuando termina. */
.aviso-portada.aviso-portada-saliendo{
    animation:aviso-portada-sale .28s ease-in forwards;
}

.aviso-portada-cuerpo{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.aviso-portada-caja{
    display:flex;
    /* Arriba y no al centro: con contenido de varias líneas, el logo centrado
       verticalmente quedaba flotando a media altura del recuadro. */
    align-items:flex-start;
    gap:12px;
    padding:12px 14px;
    text-decoration:none;
    color:var(--tinta, #0f172a);
}

/* Solo cuando es enlace: un div no se pincha y no tiene por qué iluminarse. */
a.aviso-portada-caja:hover{ background:var(--marca-suave, #eef2ff); }

.aviso-portada-logo{
    width:auto;
    height:28px;
    flex:0 0 auto;
}

.aviso-portada-texto{
    display:flex;
    flex-direction:column;
    line-height:1.3;
    font-size:.95rem;
}

.aviso-portada-texto strong{ font-size:1rem; }

/* ------------------------------------------------- contenido HTML del aviso

   Lo escribe quien configura el aviso, así que los estilos viven acá y no en
   ese HTML: un `style=` pegado en el panel envejece con el diseño y termina
   desentonando con el resto del sitio. Las plantillas de fábrica
   (AvisoPortada) usan solo estas clases. */

.aviso-portada-html > *:first-child{ margin-top:0; }
.aviso-portada-html > *:last-child{  margin-bottom:0; }

.aviso-portada-html p{ margin:.35rem 0; }

.aviso-portada-html h3,
.aviso-portada-html h4{
    margin:.4rem 0 .2rem;
    font-size:1rem;
    font-weight:700;
}

/* Cualquier imagen del contenido se ajusta al ancho del aviso: la que se pega
   suele venir de un afiche y llega a mil píxeles. */
.aviso-portada-html img{
    display:block;
    max-width:100%;
    height:auto;
    border-radius:calc(var(--radio, 14px) - 6px);
    margin:.4rem 0;
}

.aviso-portada-html ul,
.aviso-portada-html ol{
    margin:.35rem 0;
    padding-left:1.1rem;
}

.aviso-portada-html li{ margin:.15rem 0; }

/* La segunda línea, la del detalle: más chica y más apagada que el resto. */
.aviso-portada-html .aviso-nota{
    font-size:.85rem;
    color:var(--tinta-media, #475569);
}

/* Un botón que no es botón: el aviso entero ya es el enlace configurado en
   «Adónde lleva el aviso», así que esto solo tiene que parecerlo. Poner un
   <a> de verdad adentro sería un enlace dentro de otro. */
.aviso-portada-html .aviso-boton{
    display:inline-block;
    margin-top:.2rem;
    padding:.35rem .8rem;
    border-radius:999px;
    background:var(--marca, #2563eb);
    color:#fff;
    font-size:.85rem;
    font-weight:600;
}

/* El número de una promoción: es lo único que se lee de lejos, así que va
   grande y en el color de la marca. */
.aviso-portada-html .aviso-cifra{
    margin:.1rem 0;
    font-size:1.8rem;
    font-weight:800;
    line-height:1.1;
    color:var(--marca, #2563eb);
}

/* Un código de cupón se copia a mano: monoespaciado y con aire, para no
   confundir un cero con una O. */
.aviso-portada-html .aviso-codigo{
    display:inline-block;
    padding:.3rem .7rem;
    border:1px dashed var(--marca, #2563eb);
    border-radius:8px;
    background:var(--marca-suave, #eef2ff);
    font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:1rem;
    font-weight:700;
    letter-spacing:.08em;
}

/* Precio nuevo y precio anterior en la misma línea: el tachado apagado, para
   que el que se lee primero sea el que se paga. */
.aviso-portada-html .aviso-precio{
    font-size:1.1rem;
    font-weight:700;
}

.aviso-portada-html .aviso-precio s{
    margin-left:.35rem;
    font-size:.85rem;
    font-weight:400;
    color:var(--tinta-suave, #94a3b8);
}

/* Imagen a un lado y texto al otro, para un logo o la foto de un producto. */
.aviso-portada-html .aviso-fila{
    display:flex;
    align-items:center;
    gap:10px;
}

.aviso-portada-html .aviso-fila img{
    flex:0 0 auto;
    width:64px;
    margin:0;
}

.aviso-portada-html .aviso-fila > div{ min-width:0; }

.aviso-portada-cerrar{
    flex:0 0 auto;
    border:0;
    border-left:1px solid var(--borde, #e5e7eb);
    background:transparent;
    color:var(--tinta-suave, #94a3b8);
    font-size:1.4rem;
    line-height:1;
    padding:0 14px;
    cursor:pointer;
}

.aviso-portada-cerrar:hover{ color:var(--tinta, #0f172a); }

/* Debajo del aviso y con una línea que las separa: son otra frase, no otro
   aviso. Cuando no hay texto configurado, esta parte queda sola y el borde no
   se dibuja. */
.aviso-portada-redes{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    flex-wrap:wrap;
}

.aviso-portada-caja + .aviso-portada-redes{
    border-top:1px solid var(--borde, #e5e7eb);
}

.aviso-portada-redes-texto{
    font-size:.85rem;
    color:var(--tinta-media, #475569);
}

.aviso-portada-redes-iconos{
    display:flex;
    align-items:center;
    gap:8px;
}

@keyframes aviso-portada-entra{
    from{ opacity:0; transform:translateX(-50%) translateY(-12px); }
    to  { opacity:1; transform:translateX(-50%) translateY(0); }
}

@keyframes aviso-portada-sale{
    from{ opacity:1; transform:translateX(-50%) translateY(0); }
    to  { opacity:0; transform:translateX(-50%) translateY(-12px); }
}

/* ------------------------------------------------- botones de redes */

/* Cada red en su color, que es como se reconocen sin leer: el icono en blanco
   sobre el fondo de la marca. */
.red-boton{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:50%;
    color:#fff;
    text-decoration:none;
    transition:transform .15s ease;
}

.red-boton:hover{ transform:scale(1.08); }

.red-boton-icono{ width:17px; height:17px; }

.red-boton-instagram{
    background:linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888);
}

.red-boton-facebook{ background:#1877f2; }
.red-boton-tiktok{   background:#010101; }
.red-boton-whatsapp{ background:#25d366; }

/* Quien pidió menos movimiento ve el aviso aparecer y desaparecer sin
   animación: sigue cumpliendo su trabajo igual. */
@media (prefers-reduced-motion:reduce){
    .aviso-portada,
    .aviso-portada.aviso-portada-saliendo{ animation:none; }

    .red-boton:hover{ transform:none; }
}

@media (max-width:480px){
    .aviso-portada-texto{ font-size:.88rem; }
    .aviso-portada-logo{ height:24px; }
    .aviso-portada-redes{ padding:8px 14px; }
    .red-boton{ width:28px; height:28px; }
}