/* beneficio — Beneficio Vecinos */
@font-face{font-family:"Gantari";src:url("/fonts/gantari-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
    --verde:#003815;
    --verde-hoja:#425c17;
    --verde-claro:#b1c578;
    --verde-pale:#dde9ba;
    --cielo:#bad6dd;
    --tinta:#1f140f;
    --gris:#5c5b5f;
    --papel:#ffffff;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  *,*::before,*::after{box-sizing:inherit}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:20px}
  body{
    margin:0;
    font-family:"Gantari",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--verde);
    color:var(--papel);
    font-size:17px;
    line-height:1.5;
    font-weight:400;
  }
  .wrap{max-width:560px;margin:0 auto;padding:32px 22px 56px}

  /* ---------- Portada ---------- */
  .marca{
    font-size:13px;letter-spacing:.22em;font-weight:500;
    color:var(--verde-claro);margin:0 0 40px;
  }
  .saludo-vecino{
    font-size:clamp(26px,7vw,34px);font-weight:300;font-style:italic;
    color:var(--verde-pale);margin:0 0 10px;letter-spacing:-.01em;
  }
  .titular{
    font-size:clamp(32px,8.6vw,46px);
    line-height:1.04;font-weight:600;letter-spacing:-.025em;
    margin:0 0 26px;max-width:16ch;
  }
  .destacado{
    margin:0 0 30px;font-size:clamp(17px,4.6vw,21px);font-weight:400;
    color:var(--papel);max-width:16ch;line-height:1.2;
  }
  .destacado .num{
    display:block;font-size:clamp(50px,15vw,74px);line-height:.9;
    font-weight:700;letter-spacing:-.03em;color:var(--verde-claro);margin-bottom:4px;
  }
  .cta-hero{
    display:inline-block;color:var(--verde-claro);
    font-size:18px;font-weight:600;margin:0 0 36px;
    text-decoration:none;border-bottom:2px solid var(--verde-claro);padding-bottom:3px;
  }

  /* ---------- Formulario ---------- */
  .ficha{
    background:var(--papel);color:var(--tinta);
    border-radius:4px;padding:26px 22px 28px;
  }
  .ficha h2{font-size:21px;font-weight:600;margin:0 0 4px;letter-spacing:-.01em}
  .ficha p.ayuda{font-size:14px;color:var(--gris);margin:0 0 22px}
  .campo{margin-bottom:18px}
  label{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
  input[type="text"],input[type="tel"],select{
    width:100%;font:inherit;font-size:16px;color:var(--tinta);
    padding:12px 13px;border:1px solid #cfd2cb;border-radius:3px;
    background:var(--papel);appearance:none;
  }
  select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235c5b5f' stroke-width='1.5'/></svg>");background-repeat:no-repeat;background-position:right 13px center}
  input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible,[type="checkbox"]:focus-visible{outline:2px solid var(--verde-hoja);outline-offset:2px}
  .prefijo{display:flex;align-items:stretch}
  .prefijo span{
    display:flex;align-items:center;white-space:nowrap;flex:none;
    padding:0 12px;font-size:16px;color:var(--gris);
    border:1px solid #cfd2cb;border-right:0;border-radius:3px 0 0 3px;background:#f5f6f2;
  }
  .prefijo input{border-radius:0 3px 3px 0}
  .legal{display:flex;gap:12px;align-items:flex-start;margin:22px 0 8px;font-size:13px;color:var(--gris);line-height:1.45}
  .legal input[type="checkbox"]{
    appearance:auto;-webkit-appearance:checkbox;
    width:22px;height:22px;flex:none;margin:0;padding:0;border:0;
    accent-color:var(--verde);cursor:pointer;
  }
  .legal label{font-size:13px;font-weight:400;margin:0;cursor:pointer;padding-top:2px}
  .legal-link{margin:0 0 22px;padding-left:34px;font-size:13px}
  .legal-link a{color:var(--verde);text-decoration:underline}
  button{
    width:100%;font:inherit;font-size:17px;font-weight:600;
    background:var(--verde);color:var(--papel);
    border:0;border-radius:3px;padding:15px;cursor:pointer;
  }
  button:disabled{opacity:.55;cursor:default}
  .error{
    display:none;margin-top:14px;font-size:14px;color:#8c2f1d;
    background:#fdeeea;border-left:3px solid #8c2f1d;padding:10px 12px;border-radius:2px;
  }
  .error.visible{display:block}

  /* ---------- Voucher ---------- */
  #resultado{display:none}
  #resultado.visible{display:block}
  .saludo{font-size:clamp(28px,8vw,38px);font-weight:600;letter-spacing:-.02em;line-height:1.05;margin:0 0 10px}
  .saludo-sub{color:var(--verde-pale);font-weight:300;margin:0 0 28px;max-width:36ch}
  .voucher{
    background:var(--verde-pale);color:var(--verde);
    border-radius:4px;padding:28px 22px;text-align:center;
    position:relative;overflow:hidden;
  }
  .voucher::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
    background:repeating-linear-gradient(90deg,var(--verde) 0 14px,transparent 14px 28px);
  }
  .voucher .tag{font-size:12px;letter-spacing:.2em;font-weight:600;color:var(--verde-hoja);margin:0 0 14px}
  .codigo{
    font-size:clamp(38px,12vw,52px);font-weight:700;letter-spacing:.04em;
    margin:0;line-height:1;
  }
  .voucher .titular-nombre{font-size:16px;font-weight:500;margin:12px 0 2px}
  .voucher .vigencia{font-size:13px;color:var(--verde-hoja);margin:0 0 6px}
  .acciones{display:flex;flex-direction:column;gap:10px;margin:18px 0 34px}
  .btn-sec{
    display:block;text-align:center;text-decoration:none;
    border:1px solid var(--verde-claro);color:var(--verde-pale);
    border-radius:3px;padding:14px;font-size:16px;font-weight:500;background:transparent;cursor:pointer;
  }
  .btn-sec.principal{background:var(--verde-claro);border-color:var(--verde-claro);color:var(--verde);font-weight:600}

  /* ---------- Locales ---------- */
  .locales h3{font-size:14px;letter-spacing:.14em;font-weight:600;color:var(--verde-claro);margin:0 0 4px}
  .locales p.intro{font-size:15px;color:var(--verde-pale);font-weight:300;margin:0 0 20px;max-width:40ch}
  .local{border-top:1px solid rgba(177,197,120,.3);padding:15px 0}
  .local:last-of-type{border-bottom:1px solid rgba(177,197,120,.3)}
  .local .fila{display:flex;justify-content:space-between;align-items:center;gap:14px}
  .local .identidad{display:flex;align-items:center;gap:12px;min-width:0}
  .local .logo{
    width:92px;height:52px;flex:none;object-fit:contain;
    background:var(--papel);border-radius:4px;padding:7px 9px;
  }
  .local .nombre{font-size:18px;font-weight:500;margin:0}
  .local .off{font-size:18px;font-weight:700;color:var(--verde-claro);margin:0;white-space:nowrap}
  .local .nota{font-size:14px;color:var(--verde-pale);font-weight:300;margin:4px 0 0;max-width:42ch}
  .local .nota a{color:var(--verde-claro)}
  .hospital{
    margin-top:34px;padding:22px;border:1px solid rgba(186,214,221,.45);border-radius:4px;
    background:rgba(186,214,221,.07);
  }
  .hospital-marca{display:flex;align-items:center;gap:14px;margin-bottom:18px}
  .hospital-marca .logo{width:96px;height:58px;flex:none;object-fit:contain}
  .hospital-titulo{margin:0;font-size:17px;font-weight:400;color:var(--papel);line-height:1.35}
  .hospital .btn-sec{margin:0}
  .como{margin:34px 0 0;font-size:15px;color:var(--verde-pale);font-weight:300}
  .como strong{color:var(--papel);font-weight:600}
  .pie{margin-top:40px;font-size:13px;color:rgba(221,233,186,.6);line-height:1.5}
  .pie a{color:inherit}
  canvas{display:none}
  @media (prefers-reduced-motion:no-preference){
    #resultado.visible{animation:entra .45s ease-out}
    @keyframes entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  }
#barrio-otra{margin-top:10px}
