.tabs-container{
    align-items:center;
    background:#f8f8f8;
    border-radius:60px;
    box-shadow:0 0 12px 0 hsla(210,4%,89%,.5),0 0 4px 0 hsla(225,3%,74%,.16);
    display:flex;
    justify-content:center;
    margin-bottom:20px;
    margin-left:auto;
    margin-right:auto;
    padding:10px;
    width:fit-content;
}

:root {
    --primary:#4B22F4;
    --primary-dark:#3819C6;
    --accent: #f472b6;
    --green: #10B981;
    --gray-50: #fafafa;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-900: #111827;
    --white: #ffffff;
    --radius: 9999px;
    --container-width: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
body {
    font-family:'Poppins',sans-serif;
    color: var(--gray-900);
    margin: 0;
    
    line-height: 1.6;
}
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1 { margin: 0; font-weight: 600; }
h2 { margin: 0; font-weight: 300; }

.fuentes h2{
  text-align:center;
  font-size:1.75rem;
  font-weight:600;
  margin-bottom:2.5rem;
  color:#0f172a;
}

.benefits h2{
  text-align:center;
  font-size:1.75rem;
  font-weight:600;
  margin-bottom:2.5rem;
  color:#0f172a;
}

.clientes h2{
  text-align:center;
  font-size:1.75rem;
  font-weight:600;
  margin-bottom:2.5rem;
  color:#0f172a;
}

h3 { margin: 0; font-weight: 600; }
h4 { margin: 0; font-weight: 600; }
.container { width: 90%; max-width: var(--container-width); margin-inline: auto; }
/* Header */
.header { background: var(--white); min-height:88px; padding:0.75rem 0; display:flex; align-items:center; box-shadow: 0 2px 8px rgba(0,0,0,.05); position: sticky; top:0; z-index: 1000; }
.nav { display:flex; align-items:center; justify-content:space-between; padding:0; }

.nav-links { display:flex; gap:1.5rem; }
.nav-links li a { font-weight:500;  font-size:.85rem; }
.nav-actions { display:flex; gap:1rem; align-items:center; }
.btn { font-weight:600; padding:.45rem 1.1rem; border-radius:8px; border:2px solid transparent; cursor:pointer; transition:background .2s,color .2s,border .2s; }
.btn.primary { background: var(--primary); color: var(--white); }
.btn.primary:hover { background: var(--primary-dark); }
.btn.ghost-green { background:transparent; color: var(--green); border-color: var(--green); }
.btn.ghost-green:hover { background: var(--green); color: var(--white); }

.btn.text-btn{
    background:transparent;
    color:var(--gray-700);
    border:2px solid var(--primary);
    border-radius:8px;
    padding:.45rem 1rem;
}
.btn.text-btn:hover{
    border-color:var(--primary);
    color:var(--primary);
}

.btn.text-btn:hover { color: var(--primary); }

.btn.secondary {
    background:transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.burger { display:none; flex-direction:column; gap:4px; cursor:pointer; }
.burger span { width:24px; height:3px; background: var(--gray-900); border-radius:4px; }
/* Hero */

.hero {
    padding:4rem 0;
    background:linear-gradient(to bottom, #ffffff 0%, #FBF8FF 100%);
    color:var(--gray-900);
}

.hero-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap:2rem; align-items:center; }
.hero-content h1 { font-size:clamp(1.6rem,4.5vw,2.5rem); margin-bottom:1rem;  line-height:1.25; }
.hero-content p { margin-bottom:1.5rem; font-size:1.1rem;  line-height:1.4; }
.btn-group { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-img img { border-radius:16px; box-shadow:0 10px 25px rgba(0,0,0,.15); }
/* Logos */
.logos { padding:3rem 0; text-align:center; }
.logos h2 { margin-bottom:2rem; font-size:1.7rem; }
.logo-grid { display:grid; gap:2rem; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); align-items:center; }
.logo-grid img { filter: grayscale(100%); opacity:.8; transition:opacity .2s; }
.logo-grid img:hover { opacity:1; }
/* Solutions */
.solutions { background:#FBF8FF; padding:4rem 0; }
.solutions-container h2 { text-align:center; margin-bottom:2.5rem; font-size:2rem; }

.drawer {
    background:#ffffff;
    border:1px solid rgba(124,58,237,.2);
    border-radius:32px;
    box-shadow:0 8px 20px rgba(0,0,0,.04);
    padding:2rem;
}






.tabs {
    display:flex;
    overflow-x:auto;
    gap:0;
    border-radius:9999px;
}




.tab {
    flex:1 1 auto;
    border:none;
    background:transparent;
    padding:.65rem 1.5rem;
    font-weight:600;
    color:var(--gray-700);
    cursor:pointer;
    transition:background .2s,color .2s;
    border-radius:9999px;
    white-space:nowrap;
}


.tab.active {
    background: var(--white);
    color: var(--primary);
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

.panels { margin-top:2rem; }
.panel { display:none; animation:fade .4s ease-out; }
.panel.active { display:block; }


.panel-grid{
  display:flex;
  gap:3rem;
  align-items:center;
}
@media(max-width:900px){
  .panel-grid{flex-direction:column;}
}

@media(max-width:900px){
  
.panel-grid{
  display:flex;
  gap:3rem;
  align-items:center;
}
@media(max-width:900px){
  .panel-grid{flex-direction:column;}
}

}

.panel-text h3 { color:#000000; margin-bottom:.75rem; font-size:1.25rem; }
.panel-text p { margin-bottom:1rem; color: var(--gray-700); }
.panel-text ul { color: var(--gray-600); display:flex; flex-direction:column; gap:.5rem; }
.panel-img img { border-radius:16px; box-shadow:0 5px 20px rgba(0,0,0,.08); }
@keyframes fade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
/* CTA */

.cta{
    background:#ffffff;
    background:radial-gradient(100% 100% at 50% 0%, rgba(124,58,237,0.08) 0%, rgba(255,255,255,0) 75%);
    text-align:center;
    padding:4rem 1rem;
}

.cta-inner { display:flex; flex-direction:column; align-items:center; gap:1rem; }
/* Footer */

.footer{
    background:#ffffff;
    color:#101828;
    padding:4rem 0 0;
    font-size:14px;
}


.footer-grid{
    display:grid;
    gap:2rem 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
}

.footer h4 { font-size:1rem; margin-bottom:1rem; color:var(--white); }
.footer a{font-size:.75rem; color:var(--gray-100); }
.footer a:hover { color:var(--accent); }
.copyright { text-align:center; margin-top:2rem; font-size:.85rem; color:var(--gray-600); }
/* Responsive */
@media (max-width: 1024px) {
    .nav-actions { display:none; }
}
@media (max-width: 768px) {
    .nav-links { 
        position:fixed; top:64px; right:-100%; height:calc(100% - 64px); width:240px; background:var(--white); flex-direction:column; gap:1.25rem; padding:1.5rem 1rem; transition:right .3s ease; box-shadow:-4px 0 12px rgba(0,0,0,.05); 
    }
    .nav-links.open { right:0; }
    .burger { display:flex; }
}

.footer-col h4{font-size:1rem;margin-bottom:1rem;color:var(--gray-900);}
.footer-col ul li a{font-size:.9rem;color:var(--gray-700);}
.footer-col ul li a:hover{color:var(--primary);}
.store-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    margin-bottom:.5rem;
    padding:.6rem 1rem;
    font-size:.85rem;
    font-weight:600;
    border-radius:8px;
    background:var(--gray-900);
    color:var(--white);
    text-decoration:none;
}
.store-btn.google{background:#1DB954;}
.store-btn.apple{background:#000000;}

.lower-footer{
    background:#ffffff;
    padding:2rem 0;
    margin-top:3rem;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:1.5rem;
}

.brand-area{display:flex;flex-direction:column;gap:.5rem;max-width:220px;}
.footer-logo{max-width:140px;}
.badges{display:flex;gap:1rem;flex-wrap:wrap;}
.badges img{height:56px;width:auto;}
.social{display:flex;gap:1rem;}
.social img{width:20px;height:20px;filter:grayscale(100%);opacity:.7;transition:opacity .2s;}
.social img:hover{opacity:1;filter:none;}
@media(max-width:768px){
    .footer-grid{grid-template-columns: repeat(2,minmax(140px,1fr));}
    
.lower-footer{
    background:#ffffff;
    padding:2rem 0;
    margin-top:3rem;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:1.5rem;
}

}

/* === Footer Refresh === */

.footer{
    background:#ffffff;
    color:#101828;
    padding:4rem 0 0;
    font-size:14px;
}

.footer-grid h4{
    font-size:1.05rem;
    font-weight:700;
    color:#111827;
}
.footer-col ul li{
    line-height:1.9;
}
.footer-col ul li a{
    color:#475467;
    transition:color .2s;
}
.footer-col ul li a:hover{
    color:#7c3aed;
}
.store-btn{
    font-weight:600;
    font-size:.85rem;
    border:none;
}
.store-btn.google{
    background:#00A76F;
}
.store-btn.apple{
    background:#000000;
}

.lower-footer{
    background:#ffffff;
    padding:2rem 0;
    margin-top:3rem;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:1.5rem;
}


.brand-area p{
    font-size:.75rem;
    color:#667085;
}

.badges img{
    height:120px;
}
.social img{
    width:22px;
    height:22px;
}

.cta-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.25rem;
}
.cta-title{
    font-size:clamp(2rem,4vw,3rem);
    font-weight:700;
    color:#0f172a;
    margin:0;
}
.cta-subtitle{
    font-size:1.125rem;
    color:#475467;
    margin:0;
}
.capterra-rating{
    display:flex;
    align-items:center;
    gap:.35rem;
    margin-top:1rem;
    font-size:.875rem;
    color:#475467;
}
.capterra-icon{
    width:18px;
    height:18px;
}
.stars{
    letter-spacing:2px;
    color:#fbbf24;
}
.rating{
    color:#6b7280;
}

.hero .btn{
  padding:.75rem 1.6rem;
  font-size:1rem;
}

/* Hero button stack */
.hero .btn-group{
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:flex-start;
}
.hero .btn.primary{
  box-shadow:0 4px 14px rgba(124,58,237,.25);
}
.hero .btn.outline{
  background:transparent;
  color:var(--primary);
  border:2px solid var(--primary);
}
.hero .btn.outline::after{
  content:"\2192";
  font-weight:700;
  margin-left:.4rem;
  transition:transform .2s;
}
.hero .btn.outline:hover::after{
  transform:translateX(4px);
}

/* === HERO INTERACTIVE CARDS === */
.hero-cards{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  justify-items:center;
}
.interactive-card{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#ffffff;
  box-shadow:0 4px 12px rgba(0,0,0,.07);
  transition:transform .35s cubic-bezier(.25,.8,.5,1), box-shadow .35s cubic-bezier(.25,.8,.5,1);
}
.interactive-card img{
  display:block;
  width:100%;
  height:auto;
}
.badge{
  position:absolute;
  top:14px;
  right:14px;
  padding:6px 16px;
  border-radius:9999px;
  background:#FDBA12;
  color:#111827;
  font-size:.8rem;
  font-weight:600;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .25s ease-out .05s, transform .25s ease-out .05s;
  pointer-events:none;
}
.interactive-card:hover{
  transform:translateY(-10px) scale(1.04);
  box-shadow:0 14px 36px rgba(0,0,0,.12);
}
.interactive-card:hover .badge{
  opacity:1;
  transform:translateY(0);
}

/* === Solutions Panel Layout === */


.panel-grid{
  display:flex;
  gap:3rem;
  align-items:center;
}
@media(max-width:900px){
  .panel-grid{flex-direction:column;}
}

@media(max-width:900px){
  
.panel-grid{
  display:flex;
  gap:3rem;
  align-items:center;
}
@media(max-width:900px){
  .panel-grid{flex-direction:column;}
}

}


.media-card{
  background:var(--pastel);
  padding:1.5rem;
  border-radius:20px;
  flex:0 0 480px;
}

.media-card img{
  border-radius:12px;
  box-shadow:none;
}

.label{
  display:inline-block;
  margin-bottom:1rem;
  padding:.45rem 1.2rem;
  border-radius:9999px;
  background:var(--theme);
  color:#fff;
  font-size:.8rem;
  font-weight:600;
}

.panel-link{
  display:inline-block;
  margin-top:1.25rem;
  font-weight:600;
  color:var(--primary);
  text-decoration:none;
 font-size:.85rem;}
.panel-link:hover{
  text-decoration:underline;
}

.consulta-requiere{
    font-size:.85rem;
    color: #000;
    font-weight:600;
    display:inline-block;
    margin-top:1.25rem;
}

.media-card img{width:100%;height:auto;border-radius:12px;}
.panel-link{font-weight:600;text-decoration:none; font-size:.85rem;}
.panel-link:hover{text-decoration:underline;}

.panel{display:none;}
.panel.active{display:block;}

/* === Benefits Stats Section === */

.benefits{ background:#FBF8FF;}


.benefit-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.benefit-card{
  background:#ffffff;
  border-radius:16px;
  padding:2rem 1.25rem;
  text-align:center;
}
.benefit-card h3{
  font-size:1rem;
  margin-bottom:.75rem;
  color:#0f172a;
}
.stat{
  font-size:2.75rem;
  font-weight:700;
  margin-bottom:.5rem;
  color:#0f172a;
}
.benefit-card p{
  font-size:.9rem;
  color:#475467;
}

.benefits-box{
  background:#ffffff;
  border:1px solid rgba(75,34,244,.15);
  border-radius:32px;
  padding:3rem 1.5rem;
}

/* === Extra Responsive Tweaks === */
@media(max-width:768px){
  .hero-grid{display:flex;flex-direction:column;gap:2rem;}
  .hero .btn-group{flex-direction:column;align-items:stretch;}
  .panel-grid{flex-direction:column;}
  .benefit-grid{grid-template-columns:1fr;}
  .logo-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));}
}

@media(max-width:768px){
  /* Full‑width mobile drawer */
  .drawer{width:100%;padding:1.25rem;}
  .tabs{overflow-x:auto;}
  .media-card{flex:1 1 100%;padding:1rem;}
  /* Nav overlay covers full screen */
  .nav-links{
    width:100%;
  }
}

/* Tabs mobile */
@media(max-width:768px){
  .tabs{
    overflow-x:auto;
    white-space:nowrap;
    padding:0.25rem;
    gap:0.5rem;
  }
  .tabs button{
    min-width:100px;
    flex:0 0 auto;
  }
  /* Hide scrollbar iOS/Android */
  .tabs::-webkit-scrollbar{display:none;}
  .tabs{-ms-overflow-style:none;scrollbar-width:none;}
}



.solution-select{
  display:none;
  width:100%;
  padding:1rem 1.5rem;
  border:1px solid #d0d5dd;
  border-radius:60px;
  font-size:1rem;
  font-weight:600;
  background:#ffffff url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23667085' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center;
  background-size:10px 6px;
  appearance:none;
}


@media(max-width:768px){
  .tabs{display:none;}
  

.solution-select{
  display:none;
  width:100%;
  padding:1rem 1.5rem;
  border:1px solid #d0d5dd;
  border-radius:60px;
  font-size:1rem;
  font-weight:600;
  background:#ffffff url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23667085' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center;
  background-size:10px 6px;
  appearance:none;
}


}

@media(max-width:768px){
  .tabs{display:none !important;}
  .solution-select{display:block !important;}
}

.btn.whatsapp{
  display:flex;
  align-items:center;
  gap:8px;
  border:2px solid #25D366 !important;
  color:#25D366;
  padding:10px 20px !important;
  border-radius:12px;
  background:#ffffff;
}
.btn.whatsapp:hover{
  background:#25D366;
  color:#ffffff;
}
.btn.whatsapp svg path{fill:currentColor;}
.btn.text-btn, .btn.primary, .btn.outline{
  padding:10px 20px !important;
}

.btn-contact{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 20px !important;
  border:2px solid #25D366 !important;
  border-radius:12px;
  background:#ffffff;
  color:#25D366;
  font-weight:600;
  transition:background .2s,color .2s;
}
.btn-contact:hover{
  background:#25D366;
  color:#ffffff;
}
.btn-contact svg{fill:currentColor;}

/* --- Info Cards for Clima --- */
.info-cards{
    display:grid;
    gap:20px;
    margin-top:32px;
}
@media (min-width:768px){
    .info-cards{
        grid-template-columns:repeat(3,1fr);
    }
}
.card{
    background:var(--gray-50,#fafafa);
    padding:32px;
    border-radius:20px;
    box-shadow:0 2px 6px rgba(0,0,0,.05);
    transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 16px rgba(0,0,0,.08);
}
.card-icon{
    font-size:32px;
    margin-bottom:16px;
    color:var(--primary,#4B22F4);
}
.card h4{
    margin-bottom:8px;
    font-size:1.125rem;
    font-weight:600;
}
.card p{
    color:#4B5563;
    line-height:1.4;
}
/* --- End Info Cards --- */

.info-cards{
    grid-column:1/-1;
}

/* --- Official card style override --- */
.info-cards .card{
    align-items:center;
    align-self:stretch;
    background:#f8f9fa;
    border-radius:10px;
    display:flex;
    flex:1 0 0;
    flex-direction:column;
    gap:8px;
    justify-content:flex-start;
    padding:24px;
    text-align:left;
}

/* --- Card typography tweak --- */
.info-cards .card h4{
    font-size:1rem;   /* ~16px */
    line-height:1.2;
    margin-bottom:6px;
}
.info-cards .card p{
    line-height:1.35;
}

/* --- Card typography tweak v2 --- */
.info-cards .card h4{
    font-size:0.875rem; /* 14px */
}
.info-cards .card p{
    margin:0;
}

/* --- Card typography & icon spacing v3 --- */
.info-cards .card-icon{
    margin-bottom:8px;
}
.info-cards .card h4{
    font-size:1.125rem; /* 18px */
}
.info-cards .card p{
    font-size:0.875rem; /* 14px */
}

/* --- Card title color & size v4 --- */
.info-cards .card h4{
    font-size:1rem; /* 16px */
    color:var(--primary,#4B22F4);
}

/* --- Footer menu font size v2 --- */
.footer a{
    font-size:0.6875rem; /* ~11px */
}

/* --- Card left align & font size v5 --- */
.info-cards .card{
    align-items:flex-start;
    text-align:left;
}
.info-cards .card-icon{
    align-self:flex-start;
}
.info-cards .card h4{
    font-size:0.75rem; /* 12px */
    color:var(--primary,#4B22F4);
}

/* --- Solutions tweaks v6 --- */
.panel-text h3{
    max-width:22ch; /* narrower title */
}
.panel-text p{
    font-size:1.0625rem; /* ~17px */
    line-height:1.45;
}

/* --- Revert Solutions tweaks v6 --- */
.panel-text h3{
    max-width:unset;
}
.panel-text p{
    font-size:1rem;
    line-height:1.6;
}

/* --- Solutions title weight & size v8 --- */
.panel-text h3{
    font-weight:600; /* lighter than bold */
    font-size:1.375rem; /* ~22px */
}

/* --- Solutions title size v9 --- */
.panel-text h3{
    font-size:1.5rem; /* ~24px */
}

/* --- Final Solutions & Card titles size v10 --- */
.panel-text h3{
    font-size:1.625rem; /* ~26px */
}
.info-cards .card h4{
    font-size:0.875rem; /* 14px */
}

/* --- Info cards theme colors --- */
.panel-grid .info-cards .card h4,
.panel-grid .info-cards .card-icon{
    color: var(--theme, var(--primary));
}

.logo{
    color:#000;
}

/* --- Contacto page custom styles --- */
.contact-section{padding:4rem 0;}
.contact-grid{display:flex;flex-wrap:wrap;gap:2.5rem;align-items:center;justify-content:space-between;}
.contact-text{flex:1 1 40%;}
.contact-card{flex:1 1 45%;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:2rem;box-shadow:0 4px 16px rgba(0,0,0,.05);}
.contact-card label{display:block;margin:0.75rem 0 0.25rem;font-weight:600;}
.contact-card input,.contact-card textarea{width:100%;padding:0.75rem;border:1px solid #d1d5db;border-radius:8px;font-size:1rem;}
.contact-card textarea{min-height:140px;resize:vertical;}
.contact-card button{margin-top:1rem;width:100%;padding:0.75rem 1.25rem;border:none;border-radius:8px;background:var(--primary-color,#2563eb);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;}
.contact-card button:hover{opacity:.9;}
@media(max-width:768px){
  .contact-grid{flex-direction:column;}
  .contact-text,.contact-card{flex:1 1 100%;}
}
/* --- End Contacto page custom styles --- */


/* --- Clientes section styles --- */
.clients-section{
  padding:4rem 0;
  background-color:#F9FAFB;
}
.clients-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2rem;
  list-style:none;
  margin:0;
  padding:0;
}
.clients-grid img{
  height:48px;
  max-width:120px;
  filter:grayscale(100%);
  opacity:0.8;
  transition:opacity .3s ease, filter .3s ease;
}
.clients-grid img:hover{
  filter:none;
  opacity:1;
}
@media(max-width:600px){
  .clients-grid img{
    height:40px;
    max-width:100px;
  }
}
/* --- End Clientes section styles --- */


/* --- Credit slider styles (Contacto) --- */
.contact-card input[type="range"]{
  width:100%;
  margin:0.5rem 0 1.5rem;
}

.slider-label{
  font-weight:500;
  margin-top:1rem;
  display:block;
}


/* --- Credit slider display tweaks (Contacto) --- */
.slider-label span#credit-value,
#credit-value{
  font-size:1.5rem;
  font-weight:600;
  color:var(--primary);
}


/* --- Contact Form grid (Contacto) --- */
.contact-form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
}
.form-field textarea{
  min-height:120px;
}
.form-field.wide{
  grid-column:1/-1;
}
.contact-form-grid .submit-btn{
  grid-column:1/-1;
  justify-self:start;
  padding:10px 20px;
}
#credit-value{
  font-size:1.5rem;
  font-weight:600;
  color:var(--primary);
}

/* End Contact Form grid styles */


/* --- Contact Form grid fix --- */
@media (min-width: 768px){
  .contact-form-grid{
    grid-template-columns: 1fr 1fr;
  }
  .form-field.wide{
    grid-column: 1 / -1;
  }
}
/* End Contact Form grid fix */


    /* --- Terms & button tweaks (Contacto) --- */
    .contact-form-grid .terms{
      display:flex;
      gap:.5rem;
      align-items:flex-start;
      font-size:.9rem;
      line-height:1.3;
    }
    .contact-form-grid .terms a{
      color:var(--primary);
      text-decoration:underline;
    }
    .contact-form-grid button.btn-primary{
      padding:.75rem 2.5rem;
      font-weight:600;
      font-size:1rem;
      cursor:pointer;
      border:none;
      border-radius:8px;
      background:var(--primary-gradient, linear-gradient(90deg,#00ffd2 0%,#37ff9c 100%));
      color:#003040;
      transition:opacity .2s ease;
    }
    .contact-form-grid button.btn-primary:hover{
      opacity:.9;
    }
    /* --- End Terms & button tweaks --- */



/* --- Terms alignment tweak --- */
.contact-form-grid .terms{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.85rem;
  grid-column:1 / -1; /* ensures left alignment spanning columns */
}
.contact-form-grid .terms input{
  margin-top:0;
}
/* disable button default style when disabled */
.contact-form-grid button:disabled{
  opacity:.5;
  cursor:not-allowed;
}
/* --- end tweak --- */


/* --- Terms text compact --- */
.contact-form-grid .terms{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  font-size:.75rem;
  line-height:1.2;
  grid-column:1 / -1;
}
.contact-form-grid .terms span{
  display:inline-block;
}
.contact-form-grid .terms input{
  margin-top:.15rem;
}
/* --- end compact --- */


/* --- Terms wrapper grid --- */
.terms-wrapper{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.5rem;
  align-items:center;
  font-size:.75rem;
  line-height:1.2;
  grid-column:1 / -1;
}
.terms-wrapper input{
  margin-top:0;
}
.terms-wrapper a{
  color:var(--primary);
  text-decoration:underline;
}
/* button disabled style remains */

/* --- end Terms wrapper --- */


/* --- Phone field styling --- */
.phone-group{
  display:flex;
  gap:.5rem;
  align-items:center;
}
.phone-group .country-code{
  background:#fff;
  border:1px solid #ccc;
  border-radius:6px;
  padding:.45rem .6rem;
  font-size:.95rem;
  min-width:110px;
  text-align:center;
}
.phone-group input[type="tel"]{
  flex:1;
}
/* --- Testimonial styling --- */
.testimonial{
  border-left:3px solid var(--primary, #00d9a0);
  padding-left:1rem;
  margin-top:1.5rem;
}
.testimonial .quote{
  font-style:italic;
  margin-bottom:1rem;
}
.testimonial .author{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.testimonial .author img{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
}
.btn-secondary{
  background:#dfe8ff;
  color:#002060;
  border:none;
  padding:.4rem 1rem;
  border-radius:6px;
  font-size:.85rem;
  font-weight:600;
  margin-bottom:1rem;
}
/* --- End new styles --- */


/* --- Help section styles --- */
.help-section{
  margin-top:3rem;
  padding:2rem 0;
  background:#f9f9ff;
  border-radius:16px;
}
.help-grid{
  display:grid;
  gap:2rem;
}
@media (min-width:768px){
  .help-grid{
    grid-template-columns:1fr 1fr;
  }
}
.check-list{
  list-style:none;
  margin:1rem 0 0;
  padding:0;
}
.check-list li{
  position:relative;
  padding-left:1.8rem;
  margin-bottom:.75rem;
  font-size:1rem;
}
.check-list li:before{
  content:"\2714";
  position:absolute;
  left:0;
  top:0;
  color:#4d74ff; /* azul */
  font-weight:600;
}
.support-link{
  color:#1a5bff;
  font-weight:600;
  text-decoration:underline;
}
.support-link:hover{
  text-decoration:none;
}
/* --- End Help section --- */


/* --- Help box styling --- */
.help-box{
  border:1px solid rgba(123,104,238,0.2); /* suave violeta */
  border-radius:28px;
  padding:3rem 2rem;
  background:#ffffff;
}
/* ensure help-grid inside retains gap */
.help-box .help-grid{
  max-width:100%;
}
/* --- End Help box --- */


/* --- Demo heading tweak --- */
.contact-text h1.demo-title{
  font-size:1.75rem; /* reducido ~2pt respecto a 2rem anterior */
}
/* --- end tweak --- */


/* --- Padding tweaks (Contacto & Ayuda) --- */
.contact-section{
  padding:3rem 1rem;
}
.help-section{
  margin:3rem 0;
}
.help-box{
  padding:2rem 1.5rem;
}
/* --- end tweaks --- */


/* --- Help section margin fix --- */
.help-section{
  margin:0;
}
/* --- end fix --- */


/* --- Hero About styles --- */
.hero-about{
  padding:3rem 1rem 4rem;
  text-align:center;
}
.hero-about .container{
  max-width:1100px;
  margin:0 auto;
}
.hero-about h1{
  font-size:2.25rem;
  font-weight:700;
  margin-bottom:1rem;
  color:#00103d;
}
.hero-about p{
  max-width:700px;
  margin:0 auto 2.5rem;
  font-size:1.1rem;
  line-height:1.5;
  color:#555;
}
.hero-image-wrapper{
  max-width:100%;
}
.hero-image-wrapper img{
  width:100%;
  height:auto;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,0.05);
}

/* --- End Hero About --- */


/* --- About Stats Section --- */
.about-stats{
  padding:4rem 1rem;
  text-align:center;
}
.stats-heading{
  font-size:1.9rem;
  font-weight:700;
  margin-bottom:2rem;
  color:#00103d;
}
.stats-grid{
  display:grid;
  gap:2rem;
}
@media(min-width:768px){
  .stats-grid{
    grid-template-columns:repeat(3,1fr);
  }
}
.stat-number{
  font-size:2.5rem;
  font-weight:700;
  color:#00103d;
  display:block;
  margin-bottom:.5rem;
}
.stat-text{
  font-size:.95rem;
  color:#666;
  max-width:220px;
  margin:0 auto;
}

/* --- Mission Section --- */
.mission-section{
  padding:2rem 1rem 4rem;
}
.mission-box{
  background:#e8faf4;
  border-radius:8px;
  padding:3rem 1.5rem;
  text-align:center;
}
.mission-label{
  display:block;
  font-size:.75rem;
  font-weight:600;
  color:#5b32ff;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:.75rem;
}
.mission-title{
  font-size:1.8rem;
  font-weight:700;
  margin-bottom:2rem;
  max-width:500px;
  margin-left:auto;
  margin-right:auto;
  color:#00103d;
}
.mission-image img{
  width:100%;
  height:auto;
  border-radius:4px;
}

/* --- End new sections --- */


/* --- History Section --- */
.history-section{
  padding:4rem 1rem;
  text-align:center;
}
.history-label{
  display:block;
  font-size:.75rem;
  font-weight:600;
  color:#5b32ff;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:.5rem;
}
.history-heading{
  font-size:1.9rem;
  font-weight:700;
  margin-bottom:2.5rem;
  color:#00103d;
}
.founders-grid{
  display:grid;
  gap:2rem;
  justify-items:center;
}
@media(min-width:768px){
  .founders-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
.founder-card{
  text-align:center;
}
.founder-photo{
  background:#ffb400;
  border-radius:8px;
  overflow:hidden;
  width:260px;
  height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1rem;
}
.founder-photo img{
  width:100%;
  height:auto;
}
.founder-name{
  font-size:1.1rem;
  font-weight:600;
  margin:0 0 .25rem;
}
.founder-role{
  font-size:.85rem;
  color:#666;
  margin:0 0 1.5rem;
}
.history-text{
  max-width:700px;
  margin:0 auto;
  font-size:1rem;
  line-height:1.6;
  color:#444;
  margin-top:1rem;
}
/* --- End History Section --- */


/* --- Founder card size tweak --- */
.founder-photo{
  width:320px;
  height:320px;
}
@media(min-width:992px){
  .founders-grid{
    gap:1.5rem;
    grid-template-columns:repeat(2, 320px);
    justify-content:center;
  }
}


/* --- CTA Section --- */
.cta-section{
  padding:4rem 1rem;
  background:#2b0ea6; /* purple */
  color:#fff;
  border-radius:24px;
  margin:4rem 1rem;
  text-align:center;
}
@media(min-width:768px){
  .cta-section{
    margin:4rem auto;
    max-width:1200px;
  }
}
.cta-heading{
  font-size:2rem;
  font-weight:700;
  margin-bottom:1rem;
}
@media(min-width:768px){
  .cta-heading{
    font-size:2.4rem;
  }
}
.cta-sub{
  font-size:1.1rem;
  margin-bottom:2rem;
}
.cta-btn{
  display:inline-block;
  background:#fff;
  color:#2b0ea6;
  padding:.9rem 2.5rem;
  font-weight:600;
  border-radius:8px;
  transition:background .2s ease;
}
.cta-btn:hover{
  background:#f2f2ff;
}
/* --- End CTA --- */


/* --- Smooth scroll and offset for Fuentes section --- */
html{
  scroll-behavior:smooth;
}
.sources-section{
  scroll-margin-top:100px; /* offset fixed header height */
}
/* --- end --- */


/* --- Legal Page Styles --- */
.legal-wrapper{
  display:flex;
  gap:2rem;
  padding:2rem 1rem;
  max-width:1200px;
  margin:auto;
}
.legal-nav{
  flex:0 0 260px;
  position:sticky;
  top:120px; /* below header */
  align-self:flex-start;
}
.legal-nav h1{
  font-size:2rem;
  margin-bottom:1rem;
}
.legal-nav h3{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#888;
  margin-bottom:.5rem;
}
.legal-nav ul{
  list-style:none;
  padding:0;
  margin:0;
}
.legal-nav li{
  margin-bottom:1rem;
}
.legal-nav a{
  color:#555;
  text-decoration:none;
  font-weight:600;
}
.legal-nav a:hover,
.legal-nav a:focus{
  color:#4d32ff;
}
.legal-content{
  flex:1 1 0;
  max-width:700px;
}
.legal-content article{
  margin-bottom:3rem;
}
.legal-content h2{
  font-size:1.6rem;
  margin-bottom:1rem;
  color:#00103d;
}
/* --- End Legal Styles --- */

/* --- Legal nav refined --- */
.legal-nav{
  
  padding:1rem 0;
  border-radius:4px;
}
.legal-nav a{
  color:#b0b0b0;
  font-weight:600;
  text-decoration:none;
  transition:color .2s ease;
}
.legal-nav a:hover{
  color:#4d32ff;
}
.legal-nav a.active{
  color:#4d32ff;
  position:relative;
}
.legal-nav a.active::before{
  content:"";
  position:absolute;
  left:-12px;
  top:0;
  bottom:0;
  width:4px;
  background:#4d32ff;
  border-radius:2px;
}
/* --- End legal nav refined --- */


/* --- Legal full white bg & nav exact design --- */
body{}

.legal-wrapper{
  padding:3rem 1rem;
}
.legal-nav{
  flex:0 0 280px;
  font-family:inherit;
}
.legal-nav h1{
  font-size:3rem;
  font-weight:700;
  margin-bottom:2rem;
  color:#0d0d34;
}
.legal-nav h3{
  font-size:.7rem;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#8f8f9d;
  margin-bottom:1.25rem;
}
.legal-nav ul{padding-left:0;}
.legal-nav li{margin-bottom:1.25rem;list-style:none;}
.legal-nav a{
  color:#b8b8c8;
  font-weight:600;
  line-height:1.3;
  transition:color .2s ease;
}
.legal-nav a:hover{color:#4d32ff;}
.legal-nav a.active{
  color:#1a2aff;
  position:relative;
}
.legal-nav a.active::before{
  content:"";
  position:absolute;
  left:-16px;
  top:0;
  bottom:0;
  width:4px;
  background:#4d32ff;
  border-radius:2px;
}
/* --- end tweaks --- */

/* === Estilos migrados desde HTML === */
.suite-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
  }
  .suite-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.2rem;
    width: 300px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid transparent;
    overflow: hidden;
  }
  .identity { 
    background-clip: padding-box, border-box;
    background-image: linear-gradient(rgb(247, 250, 253), rgb(247, 250, 253)), linear-gradient(120deg, rgb(59, 130, 246), rgb(255, 0, 251), rgb(59, 130, 246) 80%);
    background-origin: border-box;
    background-size: 100% 100%, 200% 200%;
    justify-content: flex-start;
    animation: 2.5s linear 0s infinite normal none running rainbow-border;
   }
  .criminal { 
    background-clip: padding-box, border-box;
    background-image: linear-gradient(rgb(247, 250, 253), rgb(247, 250, 253)), linear-gradient(120deg, rgb(59, 130, 246), rgb(255, 0, 251), rgb(59, 130, 246) 80%);
    background-origin: border-box;
    background-size: 100% 100%, 200% 200%;
    justify-content: flex-start;
    animation: 2.5s linear 0s infinite normal none running rainbow-border;
   }
  .financial { 
    background-clip: padding-box, border-box;
    background-image: linear-gradient(rgb(247, 250, 253), rgb(247, 250, 253)), linear-gradient(120deg, rgb(59, 130, 246), rgb(255, 0, 251), rgb(59, 130, 246) 80%);
    background-origin: border-box;
    background-size: 100% 100%, 200% 200%;
    justify-content: flex-start;
    animation: 2.5s linear 0s infinite normal none running rainbow-border;
   }

  .suite-icon-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    text-align: center;
  }

  .suite-details {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: 1rem;
  }
  .identity .suite-details { background: transparent; }
  .criminal .suite-details { background: transparent; }
  .financial .suite-details { background: transparent; }

  .tag {
    font-size: 0.72rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    text-align: center;
    word-wrap: break-word;
    white-space: normal;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  }
  .tag-identity { background: #FCE7F3; 
                  color: #BE185D;
                  font-weight: 600; 
                  font-size: 5px;
                line-height: 1.2}
  .tag-criminal { background: #D1FAE5; 
                  color: #047857;
                  font-weight: 600; 
                  font-size: 5px;
                  line-height: 1.2}
  .tag-financial { background: #FEE2E2;
                   color: #B91C22;
                   font-weight: 600; 
                   font-size: 5px;
                  line-height: 1.2}

  .toggle-btn {
    font-size: 2rem;
    background: #a88bfa;
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
  }

  .ai-footer {
    font-size: 0.9rem;
    margin-top: 2rem;
  }

  .hidden {
    display: none !important;
  }

  @media (max-width: 768px) {
    .suite-card {
      width: 90%;
    }
    .suite-details {
      grid-template-columns: 1fr;
    }
  }

  .suite-details {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.8rem;
    border-radius: 12px;
    box-sizing: border-box;
    width: 100%;
  }
  .suite-card .suite-details .tag {
    display: block;
    font-size: 0.72rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    width: 100%;
    box-sizing: border-box;
  }


/* Sección de Precios */
.pricing-section {
  background-color: #ffffff;
  padding: 60px 20px;
  font-family: 'Poppins', sans-serif;
}

.pricing-title {
  font-size: 28px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 10px;
}

.pricing-subtitle {
  text-align: center;
  font-size: 16px;
  margin-bottom: 40px;
  color: #000;
}

.pricing-subtitle a {
  color: #4c4feb;
  text-decoration: underline;
}

.pricing-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.pricing-left {
  background-color: #F7FAFD;
  padding: 30px;
  border-radius: 16px;
  width: 360px;
  border: 1px solid #4c0ff3;
}

.pricing-left h3 {
  font-size: 18px;
  font-weight: 600;
  color: #4c0ff3;
  margin-bottom: 15px;
}

.pricing-left .highlight {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.pricing-left p {
  font-size: 14px;
  color: #374151;
}

.pricing-right {
  border: 1px solid #E5E7EB;
  padding: 30px;
  border-radius: 16px;
  width: 360px;
  background-color: #F9FAFB;
}

.pricing-right h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
}

.pricing-right ul {
  padding-left: 0;
  list-style: none;
  margin-bottom: 20px;
}

.pricing-right li {
  font-size: 14px;
  color: #374151;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.btn-sales {
  background-color: #020617;
  color: white;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 8px;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
}



@media (max-width: 768px) {
  .pricing-columns {
    flex-direction: column;
    align-items: center;
  }

  .pricing-left,
  .pricing-right {
    width: 100%;
    max-width: 400px;
  }

  .pricing-title {
    font-size: 26px;
  }

  .pricing-subtitle {
    font-size: 14px;
  }
}

.uso-section {
  padding: 4rem 1rem;
  background: linear-gradient(to bottom, #ffffff 0%, #f9f9ff 30%, #f9f9ff 70%, #ffffff 100%);
}

.uso-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 2rem;
}
.uso-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin: 0 auto 2.5rem;
  padding: 0.75rem 1rem;
  background-color: #f3f4f6;
  border-radius: 9999px;
  width: fit-content;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.uso-tab {
  background: #f3f4f6;
  color: #1f2937;
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.uso-tab:hover,
.uso-tab.active {
  background: var(--white);
    color: var(--primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
    font-weight: 600;
    
}
.uso-content {
  display: none;
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.uso-content.active {
  display: block;
}

.uso-subtitle {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 0.5rem;
}
.uso-description {
  text-align: center;
  font-size: 1rem;
  color: #64748b;
  margin-bottom: 2.5rem;
}
.uso-grid-aero {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  background: rgba(255, 248, 220, 0.5);
  padding: 2rem;
  border-radius: 16px;
}

.uso-grid-seguridad {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  background: rgba(255, 242, 231, 0.5);
  padding: 2rem;
  border-radius: 16px;
}

.uso-grid-banca {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  background: rgba(223, 243, 255, 0.5);
  padding: 2rem;
  border-radius: 16px;
}

.uso-grid-puertos {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  background: rgba(223, 248, 239, 0.5);
  padding: 2rem;
  border-radius: 16px;
}

.uso-grid-urbanizaciones {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  background: rgba(233, 230, 255, 0.5);
  padding: 2rem;
  border-radius: 16px;
}

.uso-grid-consultoras {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  background: rgba(255, 248, 220, 0.5);
  padding: 2rem;
  border-radius: 16px;
}

.uso-grid-publica {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  background: rgba(223, 248, 239, 0.5);
  padding: 2rem;
  border-radius: 16px;
}


.uso-card {
  text-align: center;
}
.uso-card img {
  height: 100px;
  margin: 0 auto 1rem auto;
  display: block;
  
}
.uso-card h4 {
  font-size: 0,95rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
}
.uso-card p {
  font-size: 0.85rem;
  color: #475569;
}

.uso-banner-container {
  position: relative;
  width: 100%;
  max-height: 400px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 20px;
}

.uso-banner-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.uso-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 35%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  align-items: center;
  padding-left: 40px;
  color: white;
}

.uso-banner-texto {
  max-width: 40%;
  font-family: 'Poppins', sans-serif;
  font-weight: 600; /* Más negrita */
  line-height: 1.3; /* Menos interlineado */
}

.uso-banner-texto h2 {
  font-size: 2.2rem;
  margin-bottom: 10px;
  font-weight: 500; /* Muy negrita */
}

.uso-banner-texto p {
  font-size: 1rem;
  font-weight: 500; /* Negrita media */
  line-height: 1.3; /* Menos espacio entre líneas */
  margin: 0;
}

.logo{display:inline-flex;align-items:center;line-height:1}
.logo img{height:20px;width:auto}

/* ===========================
   Alertas del formulario
   =========================== */
.form-alert {
  padding: 14px 18px;
  margin-bottom: 20px;
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* ÉXITO – Verde */
.form-alert--success {
  background-color: #e8f8ec;   /* verde clarito */
  border: 1px solid #33c366;
  color: #137333;
}

/* ERROR – Rojo */
.form-alert--error {
  background-color: #fdecea;   /* rojo clarito */
  border: 1px solid #f28b82;
  color: #c5221f;
}