/* Fuentes locales, igual que en styles.css, para que pase el CSP (style-src/font-src 'self') */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/poppins-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/poppins-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/poppins-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/poppins-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

  :root{
    --paper:#F1F2EE;
    --card:#FFFFFF;
    --ink:#17231F;
    --ink-soft:#4B5750;
    --teal:#1D9E75;
    --teal-deep:#12583F;
    --amber:#E3A23C;
    --line:#D8D6CC;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Poppins',sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,.brand{
    font-family:'Bricolage Grotesque',sans-serif;
  }
  .wrap{
    max-width:640px;
    margin:0 auto;
    padding:40px 20px 80px;
  }

  /* ---- cabecera tipo comanda ---- */
  header{
    text-align:center;
    padding-bottom:28px;
  }
  .brand{
    font-weight:700;
    font-size:15px;
    letter-spacing:.04em;
    color:var(--teal-deep);
  }
  h1{
    font-weight:800;
    font-size:32px;
    line-height:1.15;
    margin:14px 0 10px;
  }
  .lede{
    color:var(--ink-soft);
    font-size:15.5px;
    max-width:46ch;
    margin:0 auto;
  }
  .badge{
    display:inline-block;
    margin-top:20px;
    background:var(--teal);
    color:#fff;
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:700;
    font-size:13px;
    padding:8px 16px;
    border-radius:3px;
    transform:rotate(-1.5deg);
    box-shadow:0 2px 0 var(--teal-deep);
  }

  /* ---- ticket ---- */
  .ticket{
    background:var(--card);
    border-radius:2px;
    box-shadow:0 1px 3px rgba(23,35,31,.08), 0 12px 32px rgba(23,35,31,.06);
  }
  .tear{
    height:10px;
    background-image:
      linear-gradient(135deg, var(--paper) 25%, transparent 25%),
      linear-gradient(225deg, var(--paper) 25%, transparent 25%);
    background-position: top left;
    background-size: 14px 14px;
    background-repeat: repeat-x;
    background-color:var(--card);
  }
  .tear.bottom{ transform:rotate(180deg); }

  .ticket-inner{
    padding:36px 34px 8px;
  }

  section{
    padding:22px 0 26px;
    border-top:1.5px dashed var(--line);
  }
  section:first-of-type{border-top:none; padding-top:4px;}

  .sec-title{
    font-weight:700;
    font-size:19px;
    margin:0 0 4px;
  }
  .sec-note{
    color:var(--ink-soft);
    font-size:13.5px;
    margin:0 0 16px;
  }

  .field{ margin-bottom:16px; }
  .field label.q{
    display:block;
    font-weight:500;
    font-size:14.5px;
    margin-bottom:6px;
  }
  .hint{
    font-weight:400;
    color:var(--ink-soft);
    font-size:12.5px;
  }
  input[type="text"], input[type="tel"], input[type="email"], textarea{
    width:100%;
    font-family:'Poppins',sans-serif;
    font-size:14.5px;
    color:var(--ink);
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:4px;
    padding:10px 12px;
    resize:vertical;
  }
  input:focus, textarea:focus{
    outline:2px solid var(--teal);
    outline-offset:1px;
  }
  textarea{ min-height:64px; }

  .options{ display:flex; flex-wrap:wrap; gap:8px; }
  .opt{
    position:relative;
  }
  .opt input{
    position:absolute;
    opacity:0;
    width:100%; height:100%;
    margin:0;
    cursor:pointer;
  }
  .opt span{
    display:inline-block;
    padding:8px 13px;
    border:1px solid var(--line);
    border-radius:20px;
    font-size:13.5px;
    color:var(--ink-soft);
    background:var(--paper);
  }
  .opt input:checked + span{
    background:var(--teal);
    border-color:var(--teal);
    color:#fff;
  }
  .opt input:focus-visible + span{
    outline:2px solid var(--teal-deep);
    outline-offset:2px;
  }

  .price-tag{
    color:var(--amber);
    font-weight:600;
  }

  .price-panel{ margin-bottom:22px; }
  .price-list{ margin-top:14px; }
  .price-group-label{
    font-size:12px;
    font-weight:600;
    color:var(--ink-soft);
    margin:16px 0 4px;
  }
  .price-group-label:first-child{ margin-top:0; }
  .price-row{
    display:flex;
    align-items:flex-end;
    gap:6px;
    padding:5px 0;
    font-size:13.5px;
  }
  .p-label{ white-space:normal; }
  .p-fill{
    flex:1;
    border-bottom:1.5px dotted var(--line);
    margin-bottom:4px;
  }
  .p-price{
    font-weight:600;
    color:var(--teal-deep);
    white-space:normal;
  }

  .note-box{
    background:var(--paper);
    border-left:3px solid var(--amber);
    padding:12px 14px;
    font-size:13.5px;
    color:var(--ink-soft);
    border-radius:0 4px 4px 0;
    margin-top:6px;
  }

  .send{
    text-align:center;
    padding:8px 0 34px;
  }
  button{
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:700;
    font-size:16px;
    color:#fff;
    background:var(--teal);
    border:none;
    padding:14px 30px;
    border-radius:6px;
    cursor:pointer;
  }
  button:hover{ background:var(--teal-deep); }
  .send p{
    font-size:12.5px;
    color:var(--ink-soft);
    margin-top:10px;
  }
  .send p.ok{ color:var(--teal-deep); font-weight:600; }
  .send p.error{ color:#B3492B; font-weight:600; }

  footer{
    text-align:center;
    margin-top:26px;
    font-size:12.5px;
    color:var(--ink-soft);
  }
  footer strong{ color:var(--ink); }
  footer a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--ink-soft); }