/* La Fórmula · contratos. Mismos colores que marca/plantilla-documentos/estilo.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;1,400;1,500&display=swap');

:root{
  --beige:#F5EEE3; --verde:#0E4A4A; --lima:#9BC61B; --lima-palido:#E5E7BF; --teal:#255A59;
  --texto:#2B3A38; --suave:#5C6561; --gris:#898E88; --linea:#E2D8C8; --sep:#D8D2C4; --chip:#FBF8F4;
  --error:#A23B2A;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--beige); }
body{ font-family:'Poppins',system-ui,sans-serif; font-weight:300; color:var(--texto); font-size:16px; line-height:1.7; }
b,strong{ font-weight:500; }
a{ color:var(--verde); }
.envoltura{ max-width:860px; margin:0 auto; padding:28px 16px 64px; }

.barra{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:40px; }
.barra img{ height:52px; width:auto; display:block; }
.pill{ display:inline-block; background:#fff; border-radius:999px; padding:6px 16px; font-weight:400; font-size:12px;
       letter-spacing:.2em; text-transform:uppercase; color:var(--verde); }

.kicker{ display:flex; align-items:center; gap:10px; font-weight:500; font-size:12.5px; letter-spacing:.22em;
         text-transform:uppercase; color:var(--verde); margin-bottom:12px; }
.kicker::before{ content:""; width:12px; height:14px; background:var(--lima); flex:none;
         clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
h1{ font-weight:700; font-size:clamp(34px,7vw,52px); line-height:1.08; color:var(--verde); letter-spacing:-.01em; }
h2{ font-weight:700; font-size:clamp(24px,4.5vw,30px); line-height:1.2; color:var(--verde); margin-bottom:16px; }
h1 em,h2 em{ font-family:'Lora',serif; font-style:italic; font-weight:400; }
.bajada{ font-size:18px; color:var(--suave); max-width:600px; margin-top:16px; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.chip{ border:1px solid #B6B6AE; border-radius:999px; padding:5px 15px; font-weight:400; font-size:14px; color:var(--verde); background:var(--chip); }

.tarjeta{ background:#fff; border-radius:16px; padding:28px 32px; }
.tarjeta-oscura{ background:var(--verde); color:#E8EFEE; border-radius:16px; padding:28px 32px; }
.tarjeta-oscura h2{ color:#fff; font-weight:500; } .tarjeta-oscura h2 em{ color:var(--lima); }
.bloque{ margin-top:28px; }

.boton{ appearance:none; border:0; border-radius:999px; background:var(--verde); color:#fff; font:500 15px 'Poppins',sans-serif;
        padding:13px 26px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.boton:hover{ background:#0b3c3c; }
.boton:disabled{ opacity:.5; cursor:not-allowed; }
.boton.claro{ background:#fff; color:var(--verde); border:1px solid var(--sep); }
.boton.chico{ padding:8px 16px; font-size:13.5px; }
.boton:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:3px solid var(--lima); outline-offset:2px; }

label{ display:block; font-weight:400; font-size:14px; color:var(--verde); }
input,select,textarea{ display:block; width:100%; margin-top:6px; font:300 16px 'Poppins',sans-serif; color:var(--texto);
  background:var(--chip); border:1px solid var(--sep); border-radius:10px; padding:11px 14px; }
textarea{ min-height:110px; resize:vertical; line-height:1.6; }
.campos{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.campos .ancho{ grid-column:1 / -1; }
.ayuda{ font-size:13px; color:var(--suave); margin-top:4px; font-weight:300; }
.check{ display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; font-weight:300; color:var(--texto); font-size:15px; margin-top:14px; }
.check input{ width:20px; height:20px; margin:3px 0 0; accent-color:var(--verde); }
.error{ color:var(--error); font-weight:400; font-size:14.5px; margin-top:14px; min-height:1em; }
.oculto{ display:none !important; }

@media (max-width:640px){
  .campos{ grid-template-columns:1fr; }
  .tarjeta,.tarjeta-oscura{ padding:22px 18px; }
}
