/* ==========================================================================
   POLOLOS — hoja de estilos de la landing y de las páginas legales
   Rehecha el 2026-08-15: diseño moderno, poco texto y mucho aire.

   ⚠️ RESTRICCIÓN QUE MANDA SOBRE TODO LO DEMÁS: la CSP de estas páginas es
   `default-src 'none'; img-src 'self'; style-src 'self'` — o sea:
     · NO hay JavaScript de ningún tipo (ni una línea).
     · NO se pueden usar <style> ni atributos style="": todo el CSS vive aquí.
     · NO se pueden cargar fuentes externas (font-src cae en 'none'), así que
       la tipografía es la del sistema. Se ve nativa en cada plataforma y no
       cuesta ni una petición de red.
   Cualquier efecto "interactivo" de esta landing es CSS puro.

   Las clases .nav*, .footer*, .contenedor y .legal* las comparten index.html y
   las seis páginas legales. Cambiar un nombre aquí implica tocar los 7 archivos.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }

/* --- Tokens --------------------------------------------------------------- */
:root {
    /* Los dos naranjas salen del propio logo, muestreados del PNG el 2026-08-16:
       #EE7623 es el ala clara (y el naranja de marca que ya usa la app,
       --color-action) y #E95522 es el ala encendida. Antes aquí decía #E1502A,
       que no está en el logo — corregido para que la web y la marca coincidan. */
    --fuego:     #EE7623;
    --brasa:     #E95522;

    /* El mismo naranja, oscurecido, SOLO para texto sobre fondo claro. El de
       marca da 3,45:1 sobre el crema: no llega al 4,5:1 que pide WCAG AA para
       texto normal, y lo estaban usando los enlaces de las políticas legales.
       Este da 4,83:1 y se sigue leyendo naranja, no marrón. Para RELLENOS
       (botones, degradados, iconos) se usa --brasa; para LETRAS, este. */
    --brasa-texto: #C2441B;

    /* Y el mismo naranja, apenas oscurecido, para los RELLENOS QUE LLEVAN ALGO
       BLANCO ENCIMA: botones, el icono de los pilares, los tics y la caja de
       negocios. Con el de marca, el blanco sobre el degradado daba 2,90:1 y no
       alcanzaba ni el 3:1 mínimo; con este da 3,41:1 en su punto más claro y
       4,25:1 en el más oscuro. A simple vista es el mismo naranja.
       ⚠️ NO se usa donde el naranja es LETRA sobre fondo oscuro (el «pololear»
       del titular y las cifras): ahí oscurecerlo empeoraría el contraste. */
    --fuego-relleno: #DD6A1B;
    --brasa-relleno: #D94A18;

    /* Neutro cálido, no negro. Matiz 24°, que es el del ala clara del logo:
       el fondo es el mismo color de la marca desaturado hasta volverse neutro,
       así que acompaña al naranja en vez de competir con él. Sustituye a
       #121013, cinco veces más oscuro y de matiz violáceo (280°), que chocaba
       en frío con un logo cálido. El negro puro está descartado en diseño
       actual: cansa la vista y apaga los acentos.
       Contrastes comprobados: blanco 13,26:1 · naranja de marca 4,58:1. */
    --carbon:    #372E28;
    --carbon-2:  #40352E;
    --crema:     #FFF8F3;
    --tinta:     #1C1A1D;
    --gris:      #6E6873;
    --linea:     rgba(28, 26, 29, 0.10);
    --blanco:    #FFFFFF;

    --radio:     28px;
    --radio-sm:  18px;
    --ancho:     1160px;

    --sombra:    0 18px 50px rgba(28, 26, 29, 0.10);
    --sombra-alta: 0 28px 70px rgba(233, 85, 34, 0.28);

    --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* --- Base ----------------------------------------------------------------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--fuente);
    background: var(--crema);
    color: var(--tinta);
    line-height: 1.6;
    font-size: 17px;
    overflow-x: hidden;
}

/* Titulares apretados y grandes: es lo que da el aire "de app moderna".
   clamp() los escala sin una sola media query. */
h1, h2, h3, h4 {
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 800;
}
h1 { font-size: clamp(2.6rem, 7.5vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -0.02em; }

a { color: inherit; text-decoration: none; }

:focus-visible {
    /* El anillo de foco tiene que verse sobre TODOS los fondos de la página, y
       WCAG le pide 3:1 contra cada uno. El naranja de marca da 2,75:1 sobre el
       crema — se pierde justo en la mitad clara. Este es el único de la paleta
       que pasa contra los tres: crema 3,25 · carbón 3,88 · franja 3,48. */
    outline: 3px solid var(--fuego-relleno);
    outline-offset: 3px;
    border-radius: 6px;
}

.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Botones -------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 17px 34px;
    border-radius: 999px;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    will-change: transform;
}
.btn-fuego {
    background: linear-gradient(135deg, var(--fuego-relleno), var(--brasa-relleno));
    color: var(--blanco);
    box-shadow: var(--sombra-alta);
}
.btn-fuego:hover { transform: translateY(-3px); }
.btn-linea {
    border: 2px solid rgba(255, 255, 255, 0.28);
    color: var(--blanco);
}
.btn-linea:hover { background: rgba(255, 255, 255, 0.10); }
.btn-tinta {
    background: var(--carbon);
    color: var(--blanco);
}
.btn-tinta:hover { transform: translateY(-3px); }
.btn-blanco {
    background: var(--blanco);
    color: var(--carbon);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}
.btn-blanco:hover { transform: translateY(-3px); }

.ic { width: 20px; height: 20px; flex: none; }

/* --- Navegación ----------------------------------------------------------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 248, 243, 0.82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--linea);
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 74px;
}
.nav-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.03em;
}
.nav-marca img { width: 30px; height: auto; }
.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 0.96rem;
    font-weight: 600;
}
.nav-links a { color: var(--gris); transition: color 0.15s ease; }
.nav-links a:hover { color: var(--tinta); }
.nav-cta {
    background: var(--carbon);
    color: var(--blanco) !important;
    padding: 11px 22px;
    border-radius: 999px;
}
.nav-cta:hover { background: var(--brasa-relleno); }

/* En móvil la navegación secundaria estorba: se deja solo la marca y el CTA.
   Sin JS no hay menú hamburguesa, y tampoco hace falta — la página es corta. */
@media (max-width: 780px) {
    .nav-links a:not(.nav-cta) { display: none; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
    position: relative;
    background: var(--carbon);
    color: var(--blanco);
    text-align: center;
    padding: clamp(60px, 11vw, 120px) 0 clamp(70px, 12vw, 130px);
    overflow: hidden;
    isolation: isolate;
}
/* Dos manchas de color desenfocadas: el "glow" que usan las apps de citas.
   Son divs vacíos y decorativos (aria-hidden), no imágenes: cuestan 0 bytes. */
.brillo {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
    z-index: -1;
    pointer-events: none;
}
.brillo-1 {
    width: 46vw; height: 46vw;
    max-width: 560px; max-height: 560px;
    background: var(--fuego);
    top: -12%; left: -8%;
}
.brillo-2 {
    width: 40vw; height: 40vw;
    max-width: 480px; max-height: 480px;
    background: var(--brasa);
    bottom: -18%; right: -6%;
    opacity: 0.45;
}
.hero-logo {
    width: clamp(96px, 15vw, 148px);
    margin: 0 auto clamp(24px, 4vw, 36px);
    animation: flotar 6s ease-in-out infinite;
}
@keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
.hero h1 { max-width: 15ch; margin: 0 auto; }
.hero h1 .fuego {
    background: linear-gradient(120deg, var(--fuego), var(--brasa));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-sub {
    max-width: 46ch;
    margin: clamp(20px, 3vw, 28px) auto 0;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.5;
}
.hero-botones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: clamp(30px, 4vw, 42px);
}
.hero-nota {
    margin-top: 20px;
    font-size: 0.88rem;
    /* 0.55 y no 0.45: al 0.45 daba 3,99:1, por debajo del 4,5:1 de WCAG AA. */
    color: rgba(255, 255, 255, 0.55);
}
.etiqueta {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 26px;
}

/* --- Franja de cifras ----------------------------------------------------- */
.cifras {
    background: var(--carbon-2);
    color: var(--blanco);
    padding: clamp(40px, 6vw, 64px) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.cifras-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    text-align: center;
}
.cifra {
    display: block;
    font-size: clamp(2.1rem, 4.5vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    background: linear-gradient(120deg, var(--fuego), var(--brasa));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.cifra-txt {
    display: block;
    margin-top: 8px;
    font-size: 0.92rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.62);
}

/* --- Secciones ------------------------------------------------------------ */
.seccion { padding: clamp(72px, 11vw, 130px) 0; }
.seccion-oscura { background: var(--carbon); color: var(--blanco); }

.cabeza {
    max-width: 22ch;
    margin-bottom: clamp(40px, 6vw, 64px);
}
.cabeza.centrada {
    max-width: 20ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.kicker {
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brasa-texto);
    margin-bottom: 16px;
}
.seccion-oscura .kicker { color: var(--fuego); }

/* --- Pilares (las tarjetas grandes) --------------------------------------- */
.pilares {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.pilar {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 38px 32px 34px;
    box-shadow: var(--sombra);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pilar:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 60px rgba(28, 26, 29, 0.14);
}
.pilar-icono {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blanco);
    background: linear-gradient(135deg, var(--fuego-relleno), var(--brasa-relleno));
    margin-bottom: 22px;
}
.pilar-icono .ic { width: 26px; height: 26px; }
.pilar h3 { margin-bottom: 10px; }
.pilar p { color: var(--gris); font-size: 0.99rem; }

/* La tarjeta del cifrado ocupa la fila entera y va primera. Es la única función
   de la página que las apps grandes no ofrecen, así que se le da el sitio.
   El icono pasa a la izquierda en vez de encima: a ancho completo, apilarlo
   dejaría una tarjeta con un agujero de aire en medio. */
.pilar-ancho {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 32px;
}
.pilar-ancho .pilar-icono {
    margin-bottom: 0;
    flex: none;
    width: 64px;
    height: 64px;
}
/* El texto va envuelto para que h3 y p se apilen entre sí mientras el icono
   queda al lado; sin este contenedor, el flex del padre los pondría los tres
   en la misma fila. */
.pilar-ancho-texto { min-width: 0; }
.pilar-ancho h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
.pilar-ancho p { max-width: 68ch; }

/* --- Manifiesto (logo grande + frase) ------------------------------------- */
.manifiesto-inner {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(36px, 6vw, 80px);
    align-items: center;
}
.manifiesto-logo { max-width: 300px; margin: 0 auto; }
.manifiesto p {
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    max-width: 34ch;
}
.manifiesto p + p { margin-top: 20px; }
.manifiesto strong { color: var(--blanco); font-weight: 700; }

/* --- Lista de privacidad -------------------------------------------------- */
.lista-limpia {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 40px;
    list-style: none;
}
.lista-limpia li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 0;
    border-top: 1px solid var(--linea);
    font-size: 1.05rem;
    font-weight: 600;
}
.seccion-oscura .lista-limpia li { border-top-color: rgba(255, 255, 255, 0.10); }
.tic {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fuego-relleno), var(--brasa-relleno));
    color: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.tic .ic { width: 15px; height: 15px; }

/* --- Negocios ------------------------------------------------------------- */
.negocios-caja {
    background: linear-gradient(135deg, var(--fuego-relleno), var(--brasa-relleno));
    color: var(--blanco);
    border-radius: clamp(28px, 4vw, 44px);
    padding: clamp(40px, 6vw, 72px);
    text-align: center;
}
.negocios-caja h2 { max-width: 18ch; margin: 0 auto 20px; }
.negocios-caja p {
    max-width: 48ch;
    margin: 0 auto 32px;
    font-size: 1.1rem;
    /* Blanco puro, sin opacidad: al 0.88 este párrafo daba 2,57:1 sobre el
       naranja — el peor contraste de toda la página, y encima es texto corrido.
       Aquí el blanco al 100% no es un capricho de estilo, es lo que lo hace
       legible (3,41:1). Ver la nota de --fuego-relleno. */
    color: var(--blanco);
}

/* El recorrido de un local, en cuatro pasos. Los paneles van OSCURECIDOS, no
   aclarados: el reflejo es poner un blanco translúcido, pero sobre este naranja
   eso baja el contraste del texto blanco de 3,41 a 2,86 y lo deja ilegible.
   Oscurecer un 18% lo sube a 4,84 y cumple AA de sobra. */
.negocios-pasos {
    list-style: none;
    counter-reset: paso;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    text-align: left;
    max-width: 820px;
    margin: 0 auto 34px;
}
.negocios-pasos li {
    counter-increment: paso;
    background: rgba(0, 0, 0, 0.18);
    border-radius: var(--radio-sm);
    padding: 22px 24px 22px 20px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    align-items: start;
}
/* El número se dibuja con un contador de CSS y no se escribe en el HTML: el
   <ol> ya le anuncia el orden a un lector de pantalla, así que esto es solo la
   parte visible. Así tampoco hay que renumerar a mano si se añade un paso. */
.negocios-pasos li::before {
    content: counter(paso);
    grid-row: 1 / 3;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    /* 0.72 y no el 0.55 que pedía el instinto: sobre este panel, el 0.55 daba
       2,53:1 y el número —que es justo la señal que ordena la lista— se perdía
       en el fondo. A 0.72 da 3,25:1 y cumple el mínimo de texto grande. */
    color: rgba(255, 255, 255, 0.72);
}
.negocios-caja .negocios-pasos h3 { font-size: 1.02rem; margin-bottom: 6px; }
/* El selector lleva `.negocios-caja` delante para ganarle en especificidad a
   `.negocios-caja p`, que impone un max-width de 48ch pensado para el párrafo
   de entrada. Sin esto, el resultado dependería del orden en el archivo. */
.negocios-caja .negocios-pasos p {
    font-size: 0.95rem;
    max-width: none;
    margin: 0;
}
/* La condición de precio va en panel oscurecido por lo mismo que los pasos: en
   blanco directo sobre el naranja se queda en 3,41:1 y esto es letra normal,
   justo lo que nadie debería tener que forzar la vista para leer. */
.negocios-caja .negocios-precio {
    background: rgba(0, 0, 0, 0.18);
    border-radius: var(--radio-sm);
    padding: 16px 24px;
    font-size: 0.98rem;
    max-width: 64ch;
    margin: 0 auto 28px;
}

/* --- CTA final ------------------------------------------------------------ */
.cta-final {
    background: var(--carbon);
    color: var(--blanco);
    text-align: center;
    padding: clamp(80px, 12vw, 140px) 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.cta-final h2 { max-width: 16ch; margin: 0 auto 22px; }
.cta-final p {
    max-width: 42ch;
    margin: 0 auto 34px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 1.08rem;
}
.cta-nota {
    margin-top: 22px;
    font-size: 0.88rem;
    /* 0.55 y no 0.42: al 0.42 este texto daba 4,08:1, por debajo del 4,5:1 de
       WCAG AA, y es letra pequeña. Ahora da 5,17:1 y sigue siendo secundario. */
    color: rgba(255, 255, 255, 0.55);
}

/* --- Footer --------------------------------------------------------------- */
.footer {
    background: var(--carbon);
    color: rgba(255, 255, 255, 0.55);
    padding: 52px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.92rem;
}
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--blanco);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -0.03em;
}
.footer-marca img { width: 28px; height: auto; }
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
}
.footer-links a { transition: color 0.15s ease; }
.footer-links a:hover { color: var(--fuego); }
.legal {
    margin-top: 26px;
    font-size: 0.84rem;
    /* 0.58 y no 0.38: al 0.38 daba 3,27:1 — y esto es el aviso legal, o sea
       justo el texto que no puede quedar ilegible. Ahora 5,56:1. */
    color: rgba(255, 255, 255, 0.58);
    line-height: 1.6;
}

/* --- Páginas legales ------------------------------------------------------
   Mismo lenguaje visual que la landing, pero optimizado para LEER: una sola
   columna estrecha, mucho interlineado y titulares que se distinguen del texto
   sin gritar. El contenido de estas páginas no se toca: es el texto legal. */
.legal-doc {
    padding: clamp(48px, 7vw, 88px) 0 clamp(60px, 9vw, 110px);
    background: var(--crema);
}
.legal-doc .contenedor { max-width: 780px; }

.legal-cabeza {
    padding-bottom: 28px;
    margin-bottom: 40px;
    border-bottom: 2px solid var(--linea);
}
.legal-cabeza h1 {
    font-size: clamp(2.1rem, 5vw, 3.2rem);
    margin-bottom: 14px;
}
.legal-meta {
    color: var(--gris);
    font-size: 0.94rem;
    font-weight: 600;
}

.legal-doc h2 {
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    margin: 48px 0 16px;
    padding-top: 22px;
    border-top: 1px solid var(--linea);
}
.legal-doc h2:first-of-type { border-top: none; padding-top: 0; }
.legal-doc h3 { margin: 28px 0 12px; }
.legal-doc p { margin-bottom: 16px; color: #35313A; }
.legal-doc ul, .legal-doc ol { margin: 0 0 20px 22px; }
.legal-doc li { margin-bottom: 10px; color: #35313A; }
.legal-doc strong { color: var(--tinta); font-weight: 700; }
.legal-doc em { color: var(--brasa-texto); font-style: normal; font-weight: 600; }
.legal-doc a {
    color: var(--brasa-texto);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 960px) {
    .pilares { grid-template-columns: 1fr; }
    /* En móvil el icono vuelve arriba: en una columna estrecha, en fila se come
       el ancho del titular y lo parte en tres líneas. */
    .pilar-ancho { flex-direction: column; align-items: flex-start; gap: 0; }
    .pilar-ancho .pilar-icono { margin-bottom: 22px; }
    .negocios-pasos { grid-template-columns: 1fr; }
    .cifras-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
    .manifiesto-inner { grid-template-columns: 1fr; text-align: center; }
    .manifiesto p { margin-left: auto; margin-right: auto; }
    .manifiesto-logo { max-width: 200px; }
    .lista-limpia { grid-template-columns: 1fr; gap: 0; }
    .cabeza { max-width: none; }
}
@media (max-width: 620px) {
    body { font-size: 16px; }
    .btn { width: 100%; }
    .hero-botones { flex-direction: column; align-items: stretch; }
    .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* --- Accesibilidad: quien pide menos movimiento, no lo recibe ------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Sprite de iconos: se incrusta en el HTML y no debe ocupar espacio. */
.sprite-oculto {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}