@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800&family=Lato:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Orbitron:wght@400..900&family=Special+Elite&family=Stack+Sans+Notch:wght@200..700&display=swap');

:root{
  --azul_manfreda:#007388;
  --verde_manfreda:#1cb097;
  --gris_manfreda:#7d7b80;
  --perl:#FCFCF7;
  --blanco_humo:#f5f5f5;
  --gris_texto:#212121;
  --oscuro:#0c2b31;
  --borde:#e3e1dc;
   --Terracota : #D85A30; /*Llamados a acción. Uno por página para que no compita con el azul manfreda*/ 
  --negro: rgba(28, 26, 23, 0.16);
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:"Lato", sans-serif;
  color:var(--gris_texto);
  background:var(--perl);
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

img{max-width:100%; display:block;}

.wrap, .wrap_d{
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding:0 20px;
}




@media (min-width:900px){
  .wrap, .wrap_d{ max-width:1080px; padding:0 40px; }
}

/* ============================================
   TOP: hero + formulario (una sola pieza)
   ============================================ */
/*Espacio superior*/

.top{
  background:white;
  border-bottom:1px solid var(--borde);
  padding:26px 0 34px;
}

.top-inner{
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
}



@media (min-width:900px){
  .top-inner{
    max-width:1080px;
    padding:0 40px;
    grid-template-columns:1.15fr 0.85fr;
    gap:56px;
    align-items:start;
  }
}

.brand-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:20px;
}

.brand-row img{
  width: 300px;
}

.brand-tag{
  font-family: "Lato", sans-serif;
  font-weight:600;
  font-size:18px;
  letter-spacing:1.5px;
  color:var(--azul_manfreda);
  background:rgba(0,115,136,0.08);
  padding:5px 10px;
 
}

.top-content h1{
  font-family: "Stack Sans Notch", sans-serif;
  font-weight:700;
  font-size:60px;
  line-height:1.14;
  letter-spacing:0.2px;
  color:var(--gris_texto);
  margin-bottom:20px;
}

.top-content h1 .accent{
  color:var(--azul_manfreda);
}

.top-sub{
  font-size:22px;
  line-height:1.6;
  color:var(--gris_manfreda);
  max-width:440px;
  margin-bottom:18px;
}

.badge-gratis{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:"Lato", sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:1px;
  color:var(--azul_manfreda);
  background:rgba(28,176,151,0.14);
  border:1px solid rgba(28,176,151,0.35);
  padding:8px 14px;
  
  margin-bottom:26px;
}

.badge-gratis::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--verde_manfreda);
  flex-shrink:0;
}

.top-photo{
  width:100%;
  aspect-ratio:16/10;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--borde);
}

.top-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ============ Tarjeta de formulario ============ */

.top-form-card{
  background:#fff;
  border:1px solid var(--borde);
  
  padding:26px 22px;
  box-shadow:0 10px 30px rgba(12,43,49,0.06);
}

@media (min-width:900px){
  .top-form-card{
    position:sticky;
    top:24px;
  }
}

.form-title{
  font-family:"Lato", sans-serif;
  font-weight:600;
  font-size:36px;
  letter-spacing:0.5px;
  color:var(--gris_texto);
  margin-bottom:6px;
}

.form-subtitle{
  font-size:18px;
  color:var(--gris_manfreda);
  margin-bottom:20px;
  line-height:1.5;
}

.form-group{
  margin-bottom:20px;
}

.form-group label{
  display:block;
  font-size:14px;
  letter-spacing:0.4px;
  color:var(--gris_manfreda);
  margin-bottom:10px;
  text-transform:uppercase;
}

input[type="text"],
input[type="email"],
textarea{
  width:100%;
  border:none;
  /*background:var(--blanco_humo);*/
  color:var(--gris_texto);
  outline:none;
  border-bottom: 1px solid var(--azul_manfreda);
  padding:13px 14px;
  font-size:16px; /* evita zoom automático en mobile */
  font-family:inherit;
}

input::placeholder, textarea::placeholder{
  color:#9a9894;
}

input:focus, textarea:focus{
  border-color:var(--azul_manfreda);
}

textarea{
  min-height:100px;
  resize:vertical;
}

.form-group.privacidad{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:38px;
}

.form-group.privacidad input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:19px;
  height:19px;
  min-width:19px;
  background:var(--blanco_humo);
  border:1px solid var(--borde);
  border-radius:3px;
  cursor:poLato;
  position:relative;
  margin-top:2px;
}

.form-group.privacidad input[type="checkbox"]:checked::after{
  content:"✓";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  color:var(--azul_manfreda);
  font-size:14px;
  font-weight:bold;
}

.form-group.privacidad label{
  font-size:14px;
  line-height:1.5;
  color:var(--gris_manfreda);
  text-transform:none;
  cursor:poLato;
}

.form-group.privacidad a{
  color:var(--azul_manfreda);
}

.form-message{
  text-align:center;
  font-size:13px;
  padding:11px 12px;
  border-radius:6px;
  margin-bottom:16px;
  display:none;
}

.form-message.visible{ display:block; }

.form-message.success{
  background:rgba(28,176,151,0.1);
  border:1px solid var(--verde_manfreda);
  color:#0a5a46;
}

.form-message.error{
  background:rgba(216,90,48,0.1);
  border:1px solid #d85a30;
  color:#9b3319;
}

/* ============ CTA (única acción del sitio) ============ */

.cta-btn{
  display:block;
  width:100%;
  text-align:center;
  background:var(--Terracota);
  color:#fff;
  font-family:"Lato", sans-serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:0.6px;
  text-decoration:none;
  border:none;
  
  padding:15px 18px;
  cursor:poLato;
  transition:background 0.2s ease, transform 0.15s ease;
}

.cta-btn:active{ transform:scale(0.98); }
.cta-btn:hover{ background:#005567; }

/* ============================================
   LOGOS DE CLIENTES
   ============================================ */

.logos{
  background:var(--gris_texto);
  padding:34px 0;
  border-bottom:1px solid var(--borde);
}

.logos-label{
  text-align:center;
  font-size:20px;
  font-family:"Lato", sans-serif;
  color:var(--blanco_humo);
  font-weight: 800;
  letter-spacing:1px;
  text-transform:uppercase;
  
  margin-bottom:20px;
}

.logos-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:18px 26px;
}

.logo-tile{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--borde);
  border-radius:8px;
  padding:14px 20px;
  height: 100px;
  width:132px;
}

.logo-tile img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:grayscale(1) opacity(0.65);
  transition:filter 0.25s ease;
}

.logo-tile:hover img{
  filter:grayscale(0) opacity(1);
}

/* ============ BENEFICIOS ============ */

.beneficios{
  background:white;
  padding:38px 0;
}

.beneficios-title, .casos-title{
  font-family: "Lato", sans-serif;
  font-weight:600;
  font-size:36px;
  letter-spacing:1px;
  text-align:center;
  margin-bottom:8px;
}

.beneficios-divider, .casos-divider{
  width:46px;
  height:2px;
  background:var(--azul_manfreda);
  margin:0 auto 26px;
}

.beneficios-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:14px;
}



@media (min-width:900px){
  .beneficios-list{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
  }
}

.beneficios-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:var(--perl);
  border:1px solid var(--borde);
  
  padding:16px 18px;
  font-size:16px;
  line-height:1.5;
}

.beneficios-list li svg{
  flex-shrink:0;
  width:25px;
  height:25px;
  color:var(--azul_manfreda);
  margin-top:1px;
}

.beneficios-list li strong{
  color:var(--gris_texto);
  font-weight:600;
}

/* ============ POR QUÉ ============ */

.porque{
  background:var(--gris_texto);
  padding:38px 0;
  border-top:1px solid var(--borde);
  border-bottom:1px solid var(--borde);
  
}

.datos{
  display: grid;
  place-items: center;
  height: 30vh;
  background:var(--gris_texto);
  text-align: center;
  margin: 0 auto;
  font-family: "Lato", sans-serif;
  color: white;
  
}

.datos a{
  color: var(--blanco_humo);
  text-decoration: none;
  font-size: 16px;
  padding-bottom: 10px;
}
.catalogoa a{
  font-family: 'Lato', sans-serif;
  color: var(--blanco_humo);
  font-size: 16px;
}
.datos_c b{
  font-size: 16px;
  color: var(--blanco_humo);
}

.porque p{
  font-size:14.5px;
  line-height:1.7;
  text-align:center;
  color:var(--blanco_humo);
  max-width:560px;
  margin:0 auto;
  font-size: 16px;
}

.porque strong{
  color:var(--verde_manfreda);
  font-weight:600;
}

.logo_b{
  margin: 0 auto;
  max-width: 300px;
  height: auto;
}
/* ============ CASOS DE ÉXITO ============ */

.casos{
  background:var(--perl);
  padding:38px 0 46px;
}

.casos-carousel{
  display:flex;
  flex-direction:column;
  gap:16px;
}

@media (min-width:900px){
  .casos-carousel{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
  }
}

.caso-card{
  background:#fff;
  border:1px solid var(--borde);
  border-radius:8px;
  overflow:hidden;
}

.caso-photo{
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#e9e7e2;
}

.caso-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.caso-body{
  padding:16px;
}

.caso-tag{
  display:inline-block;
  font-family:"Orbitron", sans-serif;
  font-size:18px;
  letter-spacing:1px;
  color:var(--azul_manfreda);
  background:rgba(0,115,136,0.08);
  padding:4px 10px;
  border-radius:3px;
  margin-bottom:10px;
}

.caso-quote{
  font-size:16px;
  line-height:1.6;
  font-style:italic;
  color:var(--gris_texto);
  margin-bottom:10px;
}

.caso-autor{
  font-size:18px;
  color:var(--gris_manfreda);
}

.caso-autor strong{
  color:var(--gris_texto);
}

/* Placeholder de pie: el usuario agrega su propio footer debajo de esta sección */