/* ==========================================================================
   Total Compliance — Prototipo web
   Hoja de estilos única (sin dependencias externas ni fuentes remotas)
   ========================================================================== */

:root{
  --azul:#123a5e;
  --azul-oscuro:#0c2740;
  --azul-claro:#e8eef5;
  --dorado:#c9a227;
  --dorado-claro:#f3e6bf;
  --tinta:#16222e;
  --gris:#5b6b7b;
  --gris-claro:#f4f6f8;
  --borde:#d8e0e8;
  --blanco:#ffffff;
  --rojo:#a3341f;
  --ok:#1f6f43;
  --sombra:0 1px 2px rgba(16,32,48,.06), 0 8px 24px rgba(16,32,48,.06);
  --radio:10px;
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  color:var(--tinta);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;color:var(--azul-oscuro);margin:0 0 .5em}
h1{font-size:clamp(1.9rem,4.2vw,2.85rem);letter-spacing:-.01em}
h2{font-size:clamp(1.35rem,2.6vw,1.9rem)}
h3{font-size:1.12rem}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.15em}
li{margin:.35em 0}
code{background:var(--gris-claro);padding:.1em .35em;border-radius:4px;font-size:.92em}
em{color:var(--gris)}

.contenedor{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--azul);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px;border-radius:6px}

/* ---------- Aviso de prototipo ---------- */
.aviso-prototipo{
  background:var(--dorado-claro);
  border-bottom:1px solid #e2cf94;
  color:#5c4a10;
  font-size:.82rem;
  text-align:center;
  padding:6px 14px;
}
.aviso-prototipo strong{color:#4a3b0c}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--borde);
  backdrop-filter:saturate(140%) blur(6px);
}
.header-inner{
  display:flex;align-items:center;gap:18px;
  /* OJO: solo el relleno vertical. Antes decía `padding:12px 0`, que anulaba el
     `padding:0 20px` de .contenedor (mismo peso, y esta regla va después):
     el logo y el botón de menú quedaban pegados a los bordes de la pantalla,
     y en teléfonos con esquinas redondeadas el logo se recortaba. */
  padding-top:12px;padding-bottom:12px;
}
.marca{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--azul-oscuro);font-size:1.02rem;letter-spacing:.01em}
.marca:hover{text-decoration:none}
.marca .logo{
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,var(--azul) 0%,var(--azul-oscuro) 100%);
  display:grid;place-items:center;color:#fff;font-size:.8rem;font-weight:700;
  box-shadow:inset 0 0 0 2px rgba(201,162,39,.55);
}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.nav a{
  padding:8px 11px;border-radius:8px;color:var(--tinta);font-size:.93rem;font-weight:500;
}
.nav a:hover{background:var(--gris-claro);text-decoration:none}
.nav a.activo{background:var(--azul-claro);color:var(--azul-oscuro);font-weight:600}
.header-cta{margin-left:8px}
.hamburguesa{
  display:none;margin-left:auto;background:none;border:1px solid var(--borde);border-radius:8px;
  padding:8px 10px;font-size:1rem;cursor:pointer;color:var(--azul-oscuro)
}
@media (max-width:960px){
  .hamburguesa{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--borde);
    flex-direction:column;align-items:stretch;padding:10px 16px 16px;gap:2px;box-shadow:var(--sombra)
  }
  .nav.abierto{display:flex}
  .nav a{padding:11px 10px}
  .header-cta{margin:6px 0 0}
  .header-cta .btn{width:100%;justify-content:center}
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  border:1px solid transparent;border-radius:996px;padding:11px 20px;
  font-size:.95rem;font-weight:600;cursor:pointer;transition:.15s ease;font-family:inherit;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primario{background:var(--dorado);color:#2c2406;box-shadow:0 2px 0 #a8861c}
.btn-primario:hover{background:#d7ae2c}
.btn-secundario{background:#fff;color:var(--azul);border-color:var(--azul);}
.btn-secundario:hover{background:var(--azul-claro)}
.btn-fantasma{background:transparent;color:var(--azul);border-color:var(--borde)}
.btn-fantasma:hover{background:var(--gris-claro)}
.btn-grande{padding:13px 24px;font-size:1rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.cta-fila{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- Secciones ---------- */
.seccion{padding:62px 0;border-top:1px solid var(--borde)}
.seccion:first-of-type{border-top:none}
.seccion-gris{background:var(--gris-claro)}
.seccion-azul{background:linear-gradient(180deg,var(--azul-oscuro),var(--azul));color:#eaf1f7}
.seccion-azul h1,.seccion-azul h2,.seccion-azul h3{color:#fff}
.seccion-azul .btn-secundario{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.seccion-azul .btn-secundario:hover{background:rgba(255,255,255,.12)}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:700;color:var(--dorado);margin:0 0 .6em}
.seccion-azul .eyebrow{color:var(--dorado-claro)}
.lead{font-size:1.08rem;color:var(--gris);max-width:70ch}
.seccion-azul .lead{color:#cfe0ec}
.ancho-texto{max-width:76ch}

/* ---------- Hero ---------- */
.hero{padding:70px 0 58px}
.hero h1{max-width:24ch}
.hero .lead{margin-bottom:1.4em}
.hero-meta{margin-top:26px;display:flex;gap:26px;flex-wrap:wrap;font-size:.9rem;color:var(--gris)}
.seccion-azul .hero-meta{color:#bcd3e2}
.hero-meta strong{color:var(--azul-oscuro);display:block;font-size:1.25rem}
.seccion-azul .hero-meta strong{color:#fff}

/* ---------- Grillas y tarjetas ---------- */
.grilla{display:grid;gap:18px}
.grilla-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grilla-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grilla-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.grilla-3,.grilla-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grilla-2,.grilla-3,.grilla-4{grid-template-columns:1fr}}

.tarjeta{
  background:#fff;border:1px solid var(--borde);border-radius:var(--radio);
  padding:20px;display:flex;flex-direction:column;gap:8px;transition:.15s ease;
}
.tarjeta:hover{box-shadow:var(--sombra);transform:translateY(-2px)}
.tarjeta h3{margin:0}
.tarjeta .norma{font-size:.82rem;color:var(--gris);text-transform:uppercase;letter-spacing:.06em}
.tarjeta .cifra{font-weight:700;color:var(--azul)}
.tarjeta .pie{margin-top:auto;padding-top:10px;font-weight:600;font-size:.92rem}
.tarjeta-familia{border-left:4px solid var(--azul)}
.tarjeta-familia .roman{font-size:.78rem;font-weight:700;color:var(--dorado);letter-spacing:.1em}
.tarjeta-destacada{border:1px solid var(--azul);background:linear-gradient(180deg,#fff,var(--azul-claro))}

.pildora{
  display:inline-block;background:var(--azul-claro);color:var(--azul-oscuro);
  border-radius:996px;padding:4px 11px;font-size:.78rem;font-weight:600
}
.pildora-gris{background:var(--gris-claro);color:var(--gris)}
.pildora-dorada{background:var(--dorado-claro);color:#6b550f}

/* ---------- Pasos ---------- */
.pasos{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:paso}
@media (max-width:820px){.pasos{grid-template-columns:1fr}}
.paso{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:22px;position:relative}
.paso::before{
  counter-increment:paso;content:counter(paso);
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--azul);color:#fff;font-weight:700;font-size:.9rem;margin-bottom:10px
}

/* ---------- Acordeón ---------- */
.acordeon{border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;background:#fff}
.acordeon + .acordeon{margin-top:12px}
.acordeon-cab{
  width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid transparent;
  padding:16px 18px;font:inherit;font-weight:600;color:var(--azul-oscuro);cursor:pointer;
  display:flex;align-items:center;gap:12px
}
.acordeon-cab:hover{background:var(--gris-claro)}
.acordeon-cab .num{
  flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:var(--azul-claro);
  display:grid;place-items:center;font-size:.85rem;font-weight:700;color:var(--azul-oscuro)
}
.acordeon-cab .flecha{margin-left:auto;transition:.2s;color:var(--gris)}
.acordeon.abierto .acordeon-cab{border-bottom-color:var(--borde);background:var(--gris-claro)}
.acordeon.abierto .flecha{transform:rotate(180deg)}
.acordeon-cuerpo{display:none;padding:18px}
.acordeon.abierto .acordeon-cuerpo{display:block}
.acordeon-cuerpo ul{margin-bottom:.6em}

/* ---------- Tablas ---------- */
.tabla-envoltura{overflow-x:auto;border:1px solid var(--borde);border-radius:var(--radio);background:#fff}
table{border-collapse:collapse;width:100%;font-size:.93rem;min-width:620px}
caption{caption-side:top;text-align:left;padding:12px 14px;font-size:.85rem;color:var(--gris)}
th,td{padding:11px 14px;border-bottom:1px solid var(--borde);text-align:left;vertical-align:top}
thead th{background:var(--gris-claro);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gris)}
tbody tr:hover{background:#fbfcfd}
tfoot td{font-weight:700;background:var(--azul-claro);color:var(--azul-oscuro)}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.chip{
  border:1px solid var(--borde);background:#fff;border-radius:996px;padding:7px 14px;
  font:inherit;font-size:.88rem;cursor:pointer;color:var(--tinta)
}
.chip:hover{background:var(--gris-claro)}
.chip.activo{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:600}
.contador-resultados{font-size:.85rem;color:var(--gris);margin:0 0 10px}

/* ---------- Listas con marca ---------- */
.lista-check{list-style:none;padding:0;margin:0 0 1em}
.lista-check li{position:relative;padding-left:24px}
.lista-check li::before{
  content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:2px;
  background:var(--dorado)
}
.bloques{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:780px){.bloques{grid-template-columns:1fr}}
.bloque{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:18px}
.bloque h4{margin:0 0 8px;font-size:1rem;color:var(--azul-oscuro)}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--borde);padding:16px 0}
.faq-item:last-child{border-bottom:none}
.faq-p{width:100%;text-align:left;background:none;border:0;font:inherit;font-weight:600;color:var(--azul-oscuro);cursor:pointer;display:flex;gap:10px;padding:0}
.faq-p .mas{margin-left:auto;color:var(--gris);font-weight:700}
.faq-r{display:none;padding:10px 0 0;color:var(--tinta)}
.faq-item.abierto .faq-r{display:block}

/* ---------- Cierre / CTA ---------- */
.cierre{background:linear-gradient(180deg,var(--azul) 0%,var(--azul-oscuro) 100%);color:#eaf1f7;padding:56px 0}
.cierre h2{color:#fff;max-width:40ch}
.cierre p{color:#cfe0ec;max-width:70ch}

/* ---------- Modal ---------- */
.modal-fondo{
  position:fixed;inset:0;background:rgba(9,20,32,.55);display:none;align-items:center;justify-content:center;
  padding:20px;z-index:60
}
.modal-fondo.abierto{display:flex}
.modal{
  background:#fff;border-radius:14px;max-width:520px;width:100%;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.3);
  max-height:90vh;overflow:auto
}
.modal h3{margin-top:0}
.modal-cerrar{margin-left:auto;background:none;border:0;font-size:1.3rem;line-height:1;cursor:pointer;color:var(--gris)}
.modal-cab{display:flex;align-items:flex-start;gap:12px}

/* ---------- Formularios ---------- */
.campo{margin-bottom:14px}
label{display:block;font-weight:600;font-size:.9rem;margin-bottom:5px;color:var(--azul-oscuro)}
input,select,textarea{
  width:100%;font:inherit;padding:10px 12px;border:1px solid var(--borde);border-radius:8px;background:#fff;color:var(--tinta)
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul);outline-offset:1px;border-color:var(--azul)}
.error-campo{color:var(--rojo);font-size:.82rem;display:none;margin-top:4px}
.campo.con-error input,.campo.con-error select,.campo.con-error textarea{border-color:var(--rojo)}
.campo.con-error .error-campo{display:block}
.oculto-visual{position:absolute;left:-9999px}
.aviso-ok{background:#e8f5ee;border:1px solid #b7dcc7;color:var(--ok);padding:12px 14px;border-radius:8px;display:none}
.aviso-ok.visible{display:block}
.nota{font-size:.85rem;color:var(--gris)}
/* La solicitud que trae un botón «Solicitar índice…»: el formulario llega con el
   mensaje ya escrito y este recuadro lo dice, para que el visitante vea que el
   botón hizo lo que prometía y no que lo dejó en un formulario en blanco. */
.pedido{background:var(--azul-claro);border-left:4px solid var(--azul);border-radius:0 var(--radio) var(--radio) 0;padding:14px 16px;margin:0 0 18px;color:var(--azul-oscuro)}
.pedido-que{font-weight:600}

/* ---------- Marcadores de pendientes ---------- */
.pendiente{
  display:inline-block;background:#fdecea;border:1px dashed #d9a79c;color:var(--rojo);
  border-radius:6px;padding:1px 7px;font-size:.8rem;font-weight:600;white-space:nowrap
}
.marca-prototipo{
  position:fixed;right:14px;bottom:14px;z-index:45;background:var(--azul-oscuro);color:#fff;
  border-radius:996px;padding:8px 14px;font-size:.78rem;box-shadow:var(--sombra);opacity:.9
}

/* ---------- Cookies ---------- */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--borde);
  box-shadow:0 -8px 30px rgba(16,32,48,.12);padding:14px 0;display:none
}
.cookies.visible{display:block}
.cookies-inner{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cookies p{margin:0;font-size:.88rem;color:var(--gris);flex:1 1 320px}

/* ---------- Footer ---------- */
.footer{background:var(--azul-oscuro);color:#c6d6e2;padding:46px 0 28px;font-size:.9rem}
.footer h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.footer a{color:#c6d6e2}
.footer a:hover{color:#fff}
.footer-grid{display:grid;gap:26px;grid-template-columns:1.4fr 1fr 1fr 1fr}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin:.4em 0}
.footer-abajo{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.15);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.82rem;color:#9db4c6}

/* ---------- Migas ---------- */
.migas{font-size:.85rem;color:var(--gris);margin:0 0 18px}
.migas a{color:var(--gris)}
.migas span{margin:0 6px}

/* ---------- Utilidades ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-1{margin-top:10px}.mt-2{margin-top:20px}.mt-3{margin-top:30px}
.mb-1{margin-bottom:10px}.mb-2{margin-bottom:20px}.mb-3{margin-bottom:30px}
.centrado{text-align:center}
.dos-columnas{display:grid;gap:30px;grid-template-columns:1.15fr .85fr;align-items:start}
@media (max-width:900px){.dos-columnas{grid-template-columns:1fr}}
.caja-dato{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:20px}
.caja-dato dl{margin:0}
.caja-dato dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gris)}
.caja-dato dd{margin:2px 0 14px;font-weight:600;color:var(--azul-oscuro)}
.caja-dato dd:last-child{margin-bottom:0}

/* ==========================================================================
   BRANDING INSTITUCIONAL — Brand Book Total Compliance (marzo 2021)
   Azul #000066 (profesionalismo) · Cían #33CCCC (innovación) · Burdeo #990066 (cercanía)
   Tipografía: Raleway (SIL OFL 1.1). El logotipo usa la fuente "Salt", ya rasterizada
   en los PNG institucionales: no se usa como fuente web.
   ========================================================================== */

@font-face{font-family:'Raleway';src:url('fonts/Raleway-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url('fonts/Raleway-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url('fonts/Raleway-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url('fonts/Raleway-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url('fonts/Raleway-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --azul:#000066;
  --azul-oscuro:#00004d;
  --azul-claro:#e8e8f4;
  --cian:#33cccc;
  --cian-oscuro:#1fa9a9;
  --cian-claro:#d8f6f6;
  --burdeo:#990066;
  --dorado:#33cccc;          /* el acento institucional es el cían */
  --dorado-claro:#d8f6f6;
  --tinta:#1c1c2e;
  --gris:#5b5b73;
  --gris-claro:#f5f6fa;
  --borde:#dad9e6;
  --rojo:#a3341f;
  --ok:#0f6b4f;
}

body{font-family:'Raleway',"Segoe UI",Roboto,Arial,system-ui,sans-serif;font-weight:400;color:var(--tinta)}
h1,h2,h3,h4{font-family:'Raleway',"Segoe UI",Arial,sans-serif;font-weight:700;color:var(--azul);letter-spacing:-.005em}
h1{font-weight:700}
.lead{font-weight:400;color:var(--gris)}
strong{font-weight:600}
a{color:var(--azul)}
.eyebrow{color:var(--burdeo);font-weight:700}
.seccion-azul .eyebrow,.cierre .eyebrow{color:var(--cian)}

/* Header y footer con logotipo institucional.
   El logotipo horizontal tiene el texto apilado y una proporcion de 2,33:1, asi
   que a 40 px de alto queda en 93 px de ancho y el wordmark se lee con esfuerzo
   (79 px en movil, practicamente ilegible). A 44 px se lee bien en las dos
   pantallas y sigue entrando junto al boton de menu en telefonos de 320 px. */
.logo-img{height:44px;width:auto;display:block}
.marca{padding:2px 0}
.marca:hover .logo-img{opacity:.88}
.footer-logo{height:42px;width:auto;margin:0 0 14px}
.footer h4{color:var(--cian)}

/* Fotografía del equipo (sección "Equipo" de Sobre Total Compliance) */
.foto-equipo{width:104px;height:104px;border-radius:50%;object-fit:cover;display:block;margin:0 0 14px;border:1px solid var(--borde)}

/* Botones */
.btn-primario{background:var(--cian);color:#00212b;box-shadow:0 2px 0 var(--cian-oscuro);font-weight:600}
.btn-primario:hover{background:var(--cian-oscuro);color:#001a22}
.btn-secundario{background:#fff;color:var(--azul);border-color:var(--azul)}
.btn-secundario:hover{background:var(--azul-claro)}
.btn-fantasma{color:var(--azul);border-color:var(--borde)}
.btn-fantasma:hover{background:var(--gris-claro)}
.chip.activo{background:var(--azul);border-color:var(--azul);color:#fff}
.paso::before{background:var(--azul)}
.acordeon-cab .num{background:var(--azul-claro);color:var(--azul)}
.acordeon.abierto .acordeon-cab{background:var(--azul-claro)}
.lista-check li::before{background:var(--cian)}
.tarjeta-familia{border-left:4px solid var(--cian)}
.tarjeta-destacada{border-color:var(--azul);background:linear-gradient(180deg,#fff,var(--azul-claro))}
.pildora{background:var(--azul-claro);color:var(--azul)}
.pildora-dorada{background:var(--cian-claro);color:#00605f}
.tabla-envoltura thead th{background:var(--azul);color:#fff;border-bottom:none}
.tabla-envoltura tfoot td{background:var(--azul-claro);color:var(--azul)}
.seccion-azul,.cierre{background:linear-gradient(180deg,var(--azul) 0%,var(--azul-oscuro) 100%)}
.cierre .btn-secundario{color:#fff;border-color:rgba(255,255,255,.65)}
.aviso-prototipo{background:var(--cian-claro);border-bottom:1px solid #a6e7e7;color:#00504f}
.aviso-prototipo strong{color:var(--azul)}
.marca-prototipo{background:var(--azul);color:#fff}
.pendiente{background:#fdecef;border:1px dashed #d9a3b8;color:#8c1b46}
.caja-dato dd,.cifra{color:var(--azul)}
.migas a{color:var(--gris)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cian);border-color:var(--azul)}

/* El motor lleva el foco al título de cada página al navegar, para que un lector
   de pantalla anuncie dónde empieza el contenido. Esos títulos llevan
   tabindex="-1", así que NO se alcanzan con el tabulador: el contorno de foco
   que dibuja el navegador no aporta nada y se veía como un recuadro negro
   alrededor del título. Se retira solo en ese caso: el foco visible de enlaces
   y botones (que sí se navegan con teclado) queda intacto. */
h1:focus,h2:focus,h3:focus,[tabindex="-1"]:focus{outline:none}

/* Aviso de error del formulario (versión publicada) */
.aviso-error{background:#fdecea;border:1px solid #e3b4a8;color:#8c2f1c;padding:12px 14px;border-radius:8px;display:none}
.aviso-error.visible{display:block}