/* Moft boletín y mensajes (newsletter.js). Loaded on Home and Visítanos after home.css.
   Three pieces share one set of form parts (.nl-*):
     · .nl-pop      the popup on Home: a Cacao dialog built like the menu and the cookie settings (Salty Caramel border,
                    hard panel shadow) wearing the "Intertítulo" frame
     · .nl-card     the cards on Home and Visítanos that hold a form: light (Galleta) or dark (Cacao)
     · .nl-form     the fields, checkbox, button and messages inside either
   The dark cards and the popup use the fondo «Intertítulo» (social/fondos-1930, no. 09: the silent-film title card): flat Cacao,
   a double Salty Caramel rule, a fan in each corner and a stepped crest top and bottom. It is rebuilt here in CSS and SVG
   (newsletter.js adds the pieces) so it fits any size. No glaze is used: the header's drip is the page's only one.
   Layout only: every colour, size, space and radius is a --moft-* token or a home.css variable. Solid colours only:
   states swap solid fills, borders and text. Boxes use the kit radii (cards 20px, fields 10px, buttons as pills). */

/* ---------- Form parts. Light ground by default; .nl-on-dark switches the colours ---------- */
.nl-form{
  --nl-label:var(--moft-chocolate);--nl-text:var(--moft-text-brand-on-light);--nl-line:var(--moft-cacao);
  --nl-focus:var(--moft-caramelo-deep);--nl-err:var(--moft-strawberry-deep);--nl-err-line:var(--moft-strawberry-deep);
  --nl-tick-fill:var(--moft-chocolate);--nl-tick:var(--moft-crema);--nl-link:var(--moft-chocolate);
  display:grid;gap:var(--moft-space-4);position:relative;margin:0;text-align:left}
.nl-on-dark .nl-form,.nl-pop .nl-form{
  --nl-label:var(--moft-salty-caramel);--nl-text:var(--moft-crema);--nl-line:var(--moft-salty-caramel);
  --nl-focus:var(--moft-salty-caramel);--nl-err:var(--moft-strawberry);--nl-err-line:var(--moft-strawberry);
  --nl-tick-fill:var(--moft-salty-caramel);--nl-tick:var(--moft-tiramisu);--nl-link:var(--moft-salty-caramel)}

.nl-field{display:grid;gap:6px;min-width:0}
.nl-label{font-size:var(--moft-size-small);font-weight:var(--moft-weight-bold);letter-spacing:.05em;color:var(--nl-label)}
.nl-opt{font-weight:var(--moft-weight-medium);letter-spacing:.03em}
/* 17px: anything under 16px makes iPhone zoom the page when a field is tapped */
.nl-input{display:block;width:100%;min-height:50px;margin:0;padding:12px 16px;border:3px solid var(--nl-line);border-radius:var(--moft-radius-small);background:var(--moft-whipped-cream);color:var(--moft-tiramisu);font-family:var(--moft-font);font-size:1.0625rem;font-weight:var(--moft-weight-medium);line-height:1.35;letter-spacing:.02em;appearance:none;-webkit-appearance:none;transition:border-color .12s ease}
.nl-input::placeholder{color:var(--moft-galleta-deep);opacity:1}
.nl-input:focus{outline:none;border-color:var(--moft-caramelo)}
.nl-input:focus-visible{outline:3px solid var(--nl-focus);outline-offset:2px}
.nl-input[aria-invalid="true"]{border-color:var(--nl-err-line)}
textarea.nl-input{min-height:150px;resize:vertical}
.nl-count{justify-self:end;font-size:var(--moft-size-label);font-weight:var(--moft-weight-bold);letter-spacing:.06em;color:var(--nl-label)}

/* Checkbox: a rounded square; ticked = solid fill with a tick, never a half tone */
.nl-check{padding-block:9px;display:grid;grid-template-columns:26px minmax(0,1fr);gap:var(--moft-space-3);align-items:start;cursor:pointer;font-size:14px;font-weight:var(--moft-weight-medium);line-height:1.5;letter-spacing:.02em;color:var(--nl-text)}
.nl-check input{appearance:none;-webkit-appearance:none;position:relative;width:26px;height:26px;margin:0;border:3px solid var(--nl-line);border-radius:7px;background:var(--moft-whipped-cream);cursor:pointer;transition:background-color .12s ease,border-color .12s ease}
.nl-check input:checked{background:var(--nl-tick-fill);border-color:var(--nl-tick-fill)}
.nl-check input:checked::after{content:"";position:absolute;left:6px;top:1px;width:7px;height:13px;border:solid var(--nl-tick);border-width:0 3px 3px 0;transform:rotate(45deg)}
.nl-check input:focus-visible{outline:3px solid var(--nl-focus);outline-offset:3px}
.nl-check input[aria-invalid="true"]{border-color:var(--nl-err-line)}
.nl-check a{color:var(--nl-link);font-weight:var(--moft-weight-black);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.nl-check a:hover{color:var(--nl-text)}
/* inline links: taller touch area (padding on an inline box adds no line height) */
.nl-check a,.nl-fine a,.nl-card__lead a{padding-block:12px}

/* Error line (role="alert"): the strawberry pair, one for light grounds and one for dark */
.nl-msg{margin:0;font-size:var(--moft-size-small);font-weight:var(--moft-weight-bold);line-height:1.45;letter-spacing:.03em;color:var(--nl-err)}
.nl-msg:empty{display:none}

.nl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--moft-space-2) var(--moft-space-4);margin-top:var(--moft-space-1)}
.nl-actions .moft-btn{justify-content:center;margin:0 2px 4px 0}
/* Sending: the same button, solid swap, no shape change */
.nl-form button[type="submit"][disabled]{cursor:progress;background:var(--moft-galleta);color:var(--moft-chocolate);transform:none;box-shadow:2px 4px 0 var(--btn-shadow)}
.nl-on-dark .nl-form button[type="submit"][disabled],.nl-pop .nl-form button[type="submit"][disabled]{background:var(--moft-salty-caramel-deep);color:var(--moft-crema)}
.nl-fine{margin:0;font-size:var(--moft-size-label);font-weight:var(--moft-weight-medium);line-height:1.5;letter-spacing:.04em;color:var(--nl-text)}
.nl-fine a{color:var(--nl-link);font-weight:var(--moft-weight-black);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* Honeypot: real people never see or reach it; robots fill every field */
.nl-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* After sending the form is replaced by this thank-you, a little stamp-like badge and two lines */
.nl-done{display:grid;gap:var(--moft-space-3);justify-items:start;padding-block:var(--moft-space-2)}
.nl-done[hidden]{display:none}
.nl-done__badge{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--moft-salty-caramel);border:3px solid var(--moft-tiramisu);box-shadow:var(--sh-pill) var(--moft-tiramisu)}
.nl-done__badge svg{width:28px;height:28px;fill:none;stroke:var(--moft-tiramisu);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.nl-done__t{margin:0;font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;font-synthesis:none;font-size:var(--moft-size-h2);line-height:1.15;letter-spacing:.01em}
.nl-done__p{margin:0;max-width:44ch;font-size:var(--moft-size-body);line-height:1.55;font-weight:var(--moft-weight-medium)}
.nl-card:not(.nl-on-dark) .nl-done__t,.nl-card:not(.nl-on-dark) .nl-done__p{color:var(--moft-text-on-light)}
.nl-on-dark .nl-done__t,.nl-pop .nl-done__t{color:var(--moft-crema)}
.nl-on-dark .nl-done__p,.nl-pop .nl-done__p{color:var(--moft-crema)}

/* ---------- Cards that hold a form (Home, Visítanos) ---------- */
.nl-card{position:relative;overflow:hidden;display:grid;align-content:start;gap:var(--moft-space-5);padding:var(--moft-space-5);border:3px solid var(--moft-cacao);border-radius:var(--moft-radius-card);background:var(--moft-galleta);box-shadow:var(--sh-panel) var(--moft-chocolate-deep);color:var(--moft-text-on-light)}
.nl-card.nl-on-dark{background:var(--moft-cacao) url("moft-design-system/elements/moft_texture_cacao.png") center/cover;border-color:var(--moft-salty-caramel);color:var(--moft-crema)}
.nl-card__head{display:grid;gap:var(--moft-space-2);align-content:start}
.nl-card__kicker{margin:0;font-family:var(--font-display);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:20px;line-height:1.2;color:var(--moft-accent-text-on-light)}
.nl-on-dark .nl-card__kicker{color:var(--moft-salty-caramel)}
.nl-card__t{margin:0}
.nl-on-dark .nl-card__t{color:var(--moft-crema)}
.nl-card__lead{margin:0;max-width:46ch;font-size:var(--moft-size-body);line-height:1.55;font-weight:var(--moft-weight-medium)}
.nl-card__body{display:grid;gap:var(--moft-space-4);align-content:start}


/* ---------- Fondo «Intertítulo»: the title-card frame ---------- */
.nl-title,.nl-pop{--fan:52px;--crest:140px;--frame:14px;--nl-ring:var(--moft-salty-caramel)}
/* Phones: the frame hugs the edge so the fields keep their width */
@media (max-width:480px){.nl-title,.nl-pop{--frame:8px;--fan:40px;--crest:104px}.nl-card.nl-title{padding-inline:calc(var(--frame) + 10px + var(--moft-space-4))}}
.nl-card.nl-title{background:var(--moft-cacao);border-color:var(--moft-salty-caramel);text-align:center;justify-items:center;gap:var(--moft-space-5);padding:calc(var(--fan) + var(--moft-space-5)) calc(var(--frame,14px) + 10px + var(--moft-space-5)) calc(var(--fan) + var(--moft-space-4))}
.nl-title>*:not(.nl-frame){position:relative;z-index:1}
.nl-frame{position:absolute;inset:var(--frame,14px);z-index:0;pointer-events:none}
.nl-frame::before{content:"";position:absolute;inset:0;border:3px solid var(--nl-ring);border-radius:16px}
.nl-frame::after{content:"";position:absolute;inset:10px;border:2px solid var(--nl-ring);border-radius:10px}
.nl-fan{position:absolute;z-index:1;width:var(--fan);height:var(--fan);overflow:visible}
.nl-fan--tl{top:11px;left:11px}
.nl-fan--tr{top:11px;right:11px;transform:scaleX(-1)}
.nl-fan--bl{bottom:11px;left:11px;transform:scaleY(-1)}
.nl-fan--br{bottom:11px;right:11px;transform:scale(-1,-1)}
.nl-crest{position:absolute;z-index:1;left:50%;width:var(--crest);height:auto;margin-left:calc(var(--crest) / -2);overflow:visible}
.nl-crest--t{top:calc(1.5px - var(--crest) * .0545)}
.nl-crest--b{bottom:calc(1.5px - var(--crest) * .0545);transform:scaleY(-1)}

/* Title-card typography: "Moft presenta", the headline, a line, three small promises, a deco rule, then the form */
.nl-title .nl-card__head{justify-items:center;text-align:center}
.nl-title .nl-card__lead{margin-inline:auto}
.nl-title .nl-card__body{width:100%;max-width:520px}
.nl-perks{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--moft-space-2);margin:var(--moft-space-1) 0 0;padding:0;list-style:none}
.nl-perks li{display:inline-flex;align-items:center;min-height:30px;padding:0 var(--moft-space-3);border:2px solid var(--moft-salty-caramel);border-radius:var(--moft-radius-pill);color:var(--moft-salty-caramel);font-size:var(--moft-size-label);font-weight:var(--moft-weight-black);letter-spacing:.1em;text-transform:uppercase}
/* Deco rule: a line, a diamond, a line */
.nl-rule{display:flex;align-items:center;gap:var(--moft-space-3);width:100%;max-width:520px}
.nl-rule::before,.nl-rule::after{content:"";flex:1;height:2px;background:var(--moft-salty-caramel)}
.nl-rule i{flex:none;width:10px;height:10px;border-radius:2px;background:var(--moft-salty-caramel);transform:rotate(45deg)}

/* Home: its own section between the vitrina and Visítanos. Text on the left, form on the right from tablet up. */
.sec--nl{padding-block:var(--moft-space-6)}
.nl-home{max-width:920px;margin-inline:auto}

/* Visítanos: message card and newsletter card, one under the other, side by side on desktop */
.nl-pair{display:grid;gap:var(--moft-space-6);align-items:start}

@media (min-width:768px){
  .sec--nl{padding-block:var(--moft-space-7)}
  .nl-card{padding:var(--moft-space-6)}
  .nl-card__lead{font-size:1.125rem}
}
@media (min-width:1024px){
  .nl-pair{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--moft-space-7)}
  .nl-pair .nl-card{height:100%}
}
/* Name and email side by side only where the card is wide: tablet, and large desktops */
.nl-row{display:grid;gap:var(--moft-space-4)}
@media (min-width:768px) and (max-width:1023px),(min-width:1360px){.nl-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Popup (Home) ---------- */
.nl-pop{width:min(92vw,460px);max-height:90dvh;overflow:auto;margin:auto;padding:0;border:3px solid var(--moft-salty-caramel);border-radius:var(--moft-radius-card);background:var(--moft-cacao);color:var(--moft-crema);box-shadow:var(--sh-panel) var(--moft-chocolate-deep);font-family:var(--moft-font)}
.nl-pop:focus{outline:none}
/* Same enter and exit as the menu, the noticia window and the cookie settings: fade plus a small rise, backdrop fades with it */
.nl-pop{--dlg-y:14px;--dlg-s:.97;opacity:0;transform:translateY(var(--dlg-y)) scale(var(--dlg-s));transition:opacity .2s var(--moft-ease-out),transform .2s var(--moft-ease-out),overlay .2s allow-discrete,display .2s allow-discrete}
.nl-pop[open]{opacity:1;transform:none}
@starting-style{.nl-pop[open]{opacity:0;transform:translateY(var(--dlg-y)) scale(var(--dlg-s))}}
.nl-pop::backdrop{background:color-mix(in srgb,var(--moft-tiramisu) 72%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .2s var(--moft-ease-out),overlay .2s allow-discrete,display .2s allow-discrete}
.nl-pop[open]::backdrop{opacity:1}
@starting-style{.nl-pop[open]::backdrop{opacity:0}}
@media (prefers-reduced-motion:reduce){.nl-pop{--dlg-y:0px;--dlg-s:1}}

.nl-pop{--fan:44px;--crest:110px}
@media (max-width:480px){.nl-pop{--fan:36px;--crest:96px}}
.nl-pop__inner{position:relative;display:grid;gap:var(--moft-space-4);justify-items:center;text-align:center;padding:calc(var(--fan) + var(--moft-space-4)) calc(var(--frame,14px) + 10px + var(--moft-space-5)) calc(var(--fan) + var(--moft-space-3))}
.nl-pop__inner>*:not(.nl-frame):not(.nl-pop__close){position:relative;z-index:1}
.nl-pop__inner>.nl-form,.nl-pop__inner>[data-nl-body]{width:100%}
/* The top-right fan makes room for the close button */
.nl-pop .nl-fan--tr{display:none}
.nl-pop__close{position:absolute;z-index:2;top:calc(var(--frame,14px) + 26px);right:calc(var(--frame,14px) + 26px);display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 var(--moft-space-3);border:3px solid var(--moft-tiramisu);border-radius:var(--moft-radius-pill);background:var(--moft-crema);color:var(--moft-tiramisu);font:inherit;font-size:var(--moft-size-small);font-weight:var(--moft-weight-black);letter-spacing:.05em;cursor:pointer;transition:background-color .12s ease,color .12s ease}
.nl-pop__close:hover{background:var(--moft-tiramisu);color:var(--moft-crema)}
.nl-pop__close:focus-visible{outline:3px solid var(--moft-salty-caramel);outline-offset:2px}
.nl-pop__logo{display:block;width:84px;height:auto}
.nl-pop__kicker{margin:0;font-family:var(--font-display);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:22px;line-height:1.2;color:var(--moft-salty-caramel)}
.nl-pop__t{margin:0;font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;font-synthesis:none;font-size:clamp(1.65rem,6.4vw,2rem);line-height:1.12;letter-spacing:.01em;color:var(--moft-crema)}
.nl-pop__p{margin:0;font-size:var(--moft-size-body);line-height:1.55;font-weight:var(--moft-weight-medium);color:var(--moft-crema)}
.nl-pop .nl-form{margin-top:var(--moft-space-1)}
.nl-pop .nl-actions{justify-content:center}
.nl-title .nl-actions{justify-content:center}
.nl-title .nl-fine,.nl-pop .nl-fine{text-align:center}
.nl-title .nl-done,.nl-pop .nl-done{justify-items:center;text-align:center}
/* "Ahora no": a quiet text button, like "Modificar" in the cookie bar */
.nl-later{min-height:44px;padding:0 var(--moft-space-2);border:0;background:none;color:var(--moft-salty-caramel);font:inherit;font-size:var(--moft-size-small);font-weight:var(--moft-weight-black);letter-spacing:.05em;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
.nl-later:hover{color:var(--moft-crema)}
.nl-later:focus-visible{outline:3px solid var(--moft-salty-caramel);outline-offset:2px;border-radius:var(--moft-radius-pill)}

@media (max-width:420px){
  .nl-actions .moft-btn{width:100%}
}
/* First name and surname side by side in the popup once there is room */
@media (min-width:400px){.nl-pop .nl-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-height:640px){.nl-pop__logo{display:none}}
@media (max-height:760px){.nl-pop .nl-perks{display:none}}
/* Desktop: a wide title card, name and surname side by side, the text on one measure */
@media (min-width:900px){
  .nl-pop{width:min(92vw,740px);--fan:60px;--crest:170px}
  .nl-pop__inner{gap:var(--moft-space-5);padding-inline:calc(var(--frame,14px) + 10px + var(--moft-space-7))}
  .nl-pop__t{font-size:2.5rem}
  .nl-pop__p{max-width:48ch;font-size:1.125rem}
  .nl-pop__logo{width:96px}
}