/* info.css — pestaña Info: hero, datos clave, pasos, despacho, FAQ, contacto */
.info{flex:1;overflow-y:auto;min-height:0;padding:34px 44px 50px;display:none}
.info.on{display:block}
.info .wrap{max-width:760px;margin:0 auto}
.ihero{text-align:center;margin:4px 0 22px;padding-bottom:22px;border-bottom:1px solid rgba(214,167,122,0.3)}
.ihero h1{font-size:31px;font-weight:700;color:var(--color-azul);line-height:1.25;letter-spacing:-0.6px}
.ihero p{font-size:15.5px;color:#9A7B52;margin-top:11px;font-style:italic}

/* Datos clave — franja de lectura rápida bajo el hero */
.ifacts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:34px}
.ifact{background:#FAF8F4;border:1px solid rgba(214,167,122,0.3);border-radius:10px;padding:14px 12px;text-align:center;line-height:1.35}
.ifact .ifacti{display:block;font-size:22px;margin-bottom:6px}
.ifact b{display:block;font-size:13px;color:var(--color-azul);font-weight:700}
.ifact i{display:block;font-size:11px;color:#8a8a8a;font-style:normal;margin-top:3px}

.islogan{font-size:17px;font-style:italic;color:var(--color-acento);font-weight:600;line-height:1.5;text-align:center;margin-bottom:30px}
.iblock{margin-bottom:30px}
.ititle{font-size:13px;font-weight:700;color:var(--color-azul);text-transform:uppercase;letter-spacing:1px;margin-bottom:14px;border-bottom:2px solid rgba(214,167,122,0.4);padding-bottom:7px}
.ihint{font-size:12px;color:#999;margin:-6px 0 12px;font-style:italic}
.ilead{font-size:15px;line-height:1.65;color:#444}

/* Cómo funciona — 3 tarjetas */
.isteps{display:flex;gap:14px;flex-wrap:wrap}
.istep{flex:1;min-width:170px;background:#FAF8F4;border:1px solid rgba(214,167,122,0.3);border-radius:8px;padding:15px 17px}
.istep b{display:block;color:var(--color-azul);font-size:14px;margin-bottom:5px;letter-spacing:0.5px}
.istep b em{font-style:normal;color:var(--color-acento);font-weight:500;font-size:11px}
.istep p{font-size:12.5px;color:#777;line-height:1.55}

/* Cómo comprar — pasos con número en círculo */
.iflow{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.istp{display:flex;align-items:flex-start;gap:11px}
.istpn{flex:none;width:26px;height:26px;border-radius:50%;background:var(--color-azul);color:var(--color-dorado);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.istp p{font-size:13px;color:#555;line-height:1.5}
.istp p b{color:var(--color-azul)}

.iphotos{margin-top:18px;display:inline-block;background:rgba(214,167,122,0.14);border:1px solid var(--color-dorado);color:var(--color-azul);font-family:inherit;font-size:13px;font-weight:700;padding:10px 16px;border-radius:8px;cursor:pointer;letter-spacing:0.2px}
.iphotos:hover{background:rgba(214,167,122,0.28)}

/* Despacho — tarjetas con ícono */
.iship{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ishipc{display:flex;align-items:flex-start;gap:11px;background:#FAF8F4;border:1px solid rgba(214,167,122,0.3);border-radius:8px;padding:12px 14px}
.ishipc .ishipi{flex:none;font-size:19px;line-height:1.2}
.ishipc div{font-size:12.5px;color:#666;line-height:1.5}
.ishipc div b{color:var(--color-azul)}
.inote{font-size:12px;color:#999;margin-top:10px;line-height:1.5;font-style:italic}

/* FAQ — acordeón (colapsable) */
.ifq{border-bottom:1px solid rgba(214,167,122,0.28)}
.ifq summary{list-style:none;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--color-azul);padding:11px 26px 11px 0;position:relative;line-height:1.4}
.ifq summary::-webkit-details-marker{display:none}
.ifq summary::after{content:'+';position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:18px;font-weight:400;color:var(--color-dorado);transition:transform .18s}
.ifq[open] summary::after{content:'–'}
.ifq summary:hover{color:var(--color-acento)}
.ifq p{font-size:13px;color:#666;line-height:1.6;padding:0 26px 13px 0}

/* Condiciones — letra chica colapsada */
.ifine{margin-top:4px;margin-bottom:26px}
.ifine summary{list-style:none;cursor:pointer;font-size:12px;font-weight:600;color:#999;text-transform:uppercase;letter-spacing:0.8px;padding:6px 0}
.ifine summary::-webkit-details-marker{display:none}
.ifine summary::before{content:'▸ ';color:var(--color-dorado)}
.ifine[open] summary::before{content:'▾ '}
.ifine ul{margin:8px 0 0;padding-left:20px}
.ifine li{font-size:12px;color:#999;line-height:1.55;margin-bottom:5px}

/* Contacto */
.icontact{background:var(--color-azul);border-radius:10px;padding:22px 24px;text-align:center;margin-top:10px}
.icontact .ict{font-size:16px;font-weight:700;color:var(--color-dorado);margin-bottom:4px}
.icontact .icd{font-size:13px;color:rgba(242,239,234,0.7);margin-bottom:16px}
/* CTA principal del banner: mismo lenguaje de marca que el botón de WhatsApp de la portada
   (verde, logo, píldora) pero con jerarquía de CTA — más grande y con aire, porque aquí es la
   acción principal de la sección, no un botón secundario de la fila de confianza. */
/* WhatsApp e Instagram como DOS botones lado a lado (mismo par que la portada): WhatsApp verde
   y el degradado de Instagram. En móvil se apilan centrados. El Instagram usa el estilo base
   .igbtn y aquí solo igualamos su tamaño al del WhatsApp para que hagan par. */
.icontact .icontactbtns{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.icontact .icontactwa,.icontact .icontactig{font-size:15px;font-weight:700;padding:13px 28px;border-radius:8px;gap:9px}
.icontact .icontactwa{box-shadow:0 4px 14px rgba(37,211,102,0.35)}
.icontact .icontactig{box-shadow:0 4px 14px rgba(221,42,123,0.35)}
.icontact .icontactwa svg,.icontact .icontactig svg{width:18px;height:18px}
.icontact .icl{font-size:12.5px;color:rgba(242,239,234,0.55);margin-top:14px;line-height:1.6}
.icontact .icl a{color:var(--color-dorado);text-decoration:none;font-weight:600;border-bottom:1px solid rgba(214,167,122,0.5)}
.icontact .icl a:hover{color:#fff;border-bottom-color:#fff}

/* Móvil / pantallas angostas */
@media (max-width:640px){
  .info{padding:24px 18px 40px}
  .ihero h1{font-size:25px}
  .ifacts{grid-template-columns:1fr 1fr;gap:9px;margin-bottom:26px}
  .iflow{grid-template-columns:1fr;gap:9px}
  .iship{grid-template-columns:1fr}
}