/* =====================================================================
   LET'S TRAVEL DISNEY — Estilos del sitio vertical Disney
   Sincronizado con letstravelstudio.com. Solo añade el lockup
   wordmark + eyebrow "DISNEY" del header/footer.
   ===================================================================== */

/* ─── Container ─── */
.container{max-width:1180px;margin:0 auto;padding:0 24px}
.container-narrow{max-width:820px;margin:0 auto;padding:0 24px}

/* ─── Utility bar (encima del header principal) ─── */
.utility-bar{
  background:var(--navy-dark);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.utility-bar .ub-inner{
  max-width:1280px;margin:0 auto;
  padding:7px 24px;min-height:30px;
  display:flex;align-items:center;justify-content:flex-end;gap:14px;
  flex-wrap:wrap;
}
.utility-bar a{
  font-family:'Lato',sans-serif;font-weight:700;
  font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,.85);text-decoration:none;
  transition:color .15s ease;
}
.utility-bar a:hover{color:var(--gold)}
.utility-bar .sep{
  color:rgba(255,255,255,.35);font-size:11px;line-height:1;
}

/* ─── Header ─── */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(239,235,227,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;max-width:1280px;margin:0 auto;gap:24px;
}
.site-header .brand-mark{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  color:var(--navy);text-decoration:none;
}
.site-header .brand-mark img.brand-logo{
  display:block;height:46px;width:auto;
}
.site-header .brand-mark .vertical-tag{
  font-family:'Lato',sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-dark);
  line-height:1;
}
.site-header .brand-mark .vertical-tag .sep{
  color:var(--gold);font-size:14px;letter-spacing:0;
  margin:0 5px;line-height:1;position:relative;top:1px;
}

/* ─── Footer brand block · vertical-tag para sub-marca Disney • Universal ─── */
.site-footer .brand-block .vertical-tag-footer{
  display:block;margin-bottom:10px;
  font-family:'Lato',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:3px;text-transform:uppercase;color:var(--gold);line-height:1;
}
.site-footer .brand-block img.brand-logo{
  display:block;height:34px;width:auto;
}
.site-footer .brand-block .vertical-tag-footer .sep{
  color:var(--gold-light);font-size:15px;letter-spacing:0;
  margin:0 6px;line-height:1;position:relative;top:1px;
}
.site-header nav.primary{display:flex;gap:28px;align-items:center}
.site-header nav.primary a{
  font-size:12.5px;color:var(--navy);text-decoration:none;font-weight:500;
  letter-spacing:.3px;transition:color .15s ease;
}
.site-header nav.primary a:hover,
.site-header nav.primary a.active{color:var(--gold-dark)}
.site-header .right{display:flex;align-items:center;gap:18px}
.site-header .socials{display:flex;gap:14px;align-items:center}
.site-header .socials a{
  color:var(--navy);opacity:.7;transition:opacity .15s ease,color .15s ease;
  display:inline-flex;
}
.site-header .socials a:hover{opacity:1;color:var(--gold-dark)}
.site-header .socials svg{width:18px;height:18px}
.site-header .cta-header{
  background:transparent;color:var(--gold-dark);
  border:1px solid var(--gold);
  padding:10px 16px;border-radius:2px;
  font-size:10.5px;letter-spacing:2px;font-weight:700;text-transform:uppercase;
  text-decoration:none;transition:all .2s ease;
}
.site-header .cta-header:hover{background:var(--gold-dark);color:var(--cream)}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--navy);padding:6px}
.menu-toggle svg{width:26px;height:26px}

/* ─── Hero universal ─── */
.hero{
  position:relative;min-height:78vh;display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--cream);overflow:hidden;
  padding:120px 24px 100px;
}
.hero .hero-bg{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg,#0D141A 0%,#1A2847 45%,#2A3957 100%);
}
.hero .hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 25% 30%, rgba(216,183,124,.18), transparent 50%),
    radial-gradient(circle at 80% 75%, rgba(184,148,94,.14), transparent 55%);
}
.hero .hero-bg.image{background-size:cover;background-position:center}
.hero .hero-bg.image::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,40,71,.25) 0%,rgba(26,40,71,.70) 100%);
}
.hero-inner{position:relative;z-index:1;max-width:880px}
.hero .eyebrow{text-shadow:0 1px 6px rgba(0,0,0,.25)}
.hero h1{
  color:var(--cream);font-size:clamp(38px,6vw,72px);font-weight:500;
  letter-spacing:-.5px;margin-bottom:8px;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.hero h1 em{color:var(--gold-light)}
.hero h2.sub{
  font-family:'Playfair Display',serif;font-style:italic;font-weight:500;
  color:var(--gold-light);font-size:clamp(20px,2.6vw,28px);
  margin-top:6px;margin-bottom:24px;
  text-shadow:0 1px 6px rgba(0,0,0,.25);
}
.hero p.lead{
  font-size:17px;line-height:1.65;color:var(--cream);
  max-width:620px;margin:0 auto 32px;opacity:.92;
  text-shadow:0 1px 8px rgba(0,0,0,.2);
}
.hero .hero-cta{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ─── Sección genérica · ritmo editorial ─── */
section.block{padding:120px 0}
section.block.tight{padding:88px 0}
section.block .eyebrow{text-align:center;margin-bottom:24px}
section.block h2{
  font-size:clamp(30px,4.2vw,46px);text-align:center;letter-spacing:-.3px;
  margin-bottom:32px;
}
section.block .gold-divider.center{margin:0 auto 40px}
section.block .lead-row{
  max-width:640px;margin:0 auto;text-align:center;color:var(--muted);font-size:15.5px;
}

/* ─── Mis dos mundos (2 cards grandes) ─── */
.worlds{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:56px;
}
.world-card{
  background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease;
}
.world-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.world-card .img{
  height:280px;background-size:cover;background-position:center;position:relative;
}
.world-card .img.fallback-disney{
  background:
    linear-gradient(135deg,rgba(26,40,71,.6),rgba(184,148,94,.3)),
    linear-gradient(135deg,#1A2847 0%,#2A3957 100%);
}
.world-card .img.fallback-world{
  background:
    linear-gradient(135deg,rgba(13,20,26,.5),rgba(216,183,124,.25)),
    linear-gradient(135deg,#2A3957 0%,#1A2847 60%,#0D141A 100%);
}
.world-card .body{padding:32px 28px 28px;flex:1;display:flex;flex-direction:column}
.world-card h3{font-size:26px;margin-bottom:6px}
.world-card .tag{
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--gold-dark);font-size:16px;margin-bottom:14px;
}
.world-card p{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:22px;flex:1}
.world-card .link{
  font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--navy);text-decoration:none;border-bottom:1px solid var(--gold);
  padding-bottom:4px;align-self:flex-start;transition:color .15s ease;
}
.world-card .link:hover{color:var(--gold-dark)}

/* ─── Proceso 4 pasos ─── */
.process{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:56px}
.process .step{
  background:transparent;padding:28px 28px 28px 0;border-left:1px solid var(--line);
  padding-left:28px;
}
.process .step .num{
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--gold-dark);font-size:22px;font-weight:500;margin-bottom:6px;
}
.process .step h4{font-size:20px;margin-bottom:8px}
.process .step p{color:var(--muted);font-size:14.5px;line-height:1.6}

/* ─── Testimonios ─── */
.testimonials{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px}
.testimonial{
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);
  padding:32px 28px;border-radius:3px;
}
.testimonial .stars{color:var(--gold-dark);letter-spacing:2px;font-size:14px;margin-bottom:14px}
.testimonial blockquote{
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--navy);font-size:18px;line-height:1.55;margin-bottom:18px;font-weight:400;
}
.testimonial .who{
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold-dark);font-weight:700;
}

/* ─── Sobre Ingrith preview (2 col) ─── */
.about-preview{
  display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;
  margin-top:32px;
}
.about-preview .photo{
  aspect-ratio:4/5;border-radius:3px;background-size:cover;background-position:center;
  background:linear-gradient(135deg,#2A3957 0%,#1A2847 50%,#0D141A 100%);
  position:relative;overflow:hidden;
}
.about-preview .photo::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 40%, rgba(216,183,124,.2), transparent 60%);
}
.about-preview .copy h2{text-align:left;font-size:clamp(28px,3.4vw,40px)}
.about-preview .copy p{color:var(--muted);font-size:16px;line-height:1.7;margin-bottom:24px;margin-top:18px}

/* ─── CTA banner ─── */
.cta-banner{
  background:linear-gradient(135deg,#0D141A 0%,#1A2847 60%,#2A3957 100%);
  color:var(--cream);padding:88px 24px;text-align:center;position:relative;overflow:hidden;
}
.cta-banner::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(216,183,124,.14), transparent 60%);
}
.cta-banner .inner{position:relative;z-index:1;max-width:740px;margin:0 auto}
.cta-banner h2{color:var(--cream);font-size:clamp(30px,4.4vw,46px);margin-bottom:28px}
.cta-banner h2 em{color:var(--gold-light)}
.cta-banner p{color:var(--cream);opacity:.85;font-size:16px;margin-bottom:32px}
.cta-banner .row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ─── Grid de categorías (Disney/World pages) ─── */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
.cat-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.cat-card{
  background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;
}
.cat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.cat-card .img{
  height:200px;
  /* background es shorthand y RESETEA size/position a su default (auto / 0% 0%).
     Por eso size:cover y position:center DEBEN ir después del shorthand,
     no antes — si van antes, el shorthand los pisa y solo se ve la esquina
     top-left de la foto (bug que se vio con las fotos del castillo + crucero). */
  background:linear-gradient(135deg,#1A2847,#2A3957);
  background-size:cover;
  background-position:center;
}
.cat-card .body{padding:22px 22px 24px}
.cat-card h3{font-size:19px;margin-bottom:8px}
.cat-card p{color:var(--muted);font-size:14px;line-height:1.55}

/* ─── Certificaciones (4 badges) ─── */
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
/* Variante usada por el bloque de Acreditaciones (12 cards en 3 categorías).
   Flexbox (no grid) para que filas incompletas queden REALMENTE centradas
   vía justify-content:center — el grid 3-col dejaba las huérfanas en cols
   2-3 (right-aligned). Con flex, 2 cards en última fila se centran auto,
   3 cards llenan la row, y 1 card sola también queda centrada. */
.certs.certs-3col{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:20px;margin-top:20px;
}
.certs.certs-3col > .cert{
  /* 3 cards por fila en desktop. (100% - 2 gaps de 20px) / 3 = ancho. */
  flex:0 1 calc((100% - 40px) / 3);
  max-width:calc((100% - 40px) / 3);
}
.cert{
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);
  padding:28px 22px;text-align:center;border-radius:3px;
}
.cert .badge{
  width:64px;height:64px;
  margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
  color:var(--gold-dark);
  background:transparent;border:none;border-radius:0;
}
.cert .badge svg{width:100%;height:100%;stroke-width:1.5}
.cert h4{font-size:14px;margin-bottom:6px;letter-spacing:-.1px}
.cert p{font-size:12.5px;color:var(--muted);line-height:1.5}
/* Meta opcional bajo el título — sub-rótulo italic gris ("Master", "Especialista", "ID 278015") */
.cert .cert-meta{
  font-size:11.5px;color:var(--muted);font-style:italic;letter-spacing:.2px;
  margin-top:4px;line-height:1.4;
}

/* Sub-eyebrow de categoría dentro del bloque Acreditaciones */
.cert-cat{
  font-family:'Lato',sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:3px;text-transform:uppercase;color:var(--gold-dark);
  text-align:center;margin:38px 0 4px;
}

/* Divider gold-dot entre categorías */
.cat-divider{
  border:none;height:24px;margin:32px 0 0;
  background-image:radial-gradient(circle, var(--gold) 2px, transparent 2.5px);
  background-position:center;background-repeat:no-repeat;
  background-size:6px 6px;
}

/* Cierre "Y siempre estoy sumando" — clase semántica */
.cert-closing{margin-top:48px}

/* ─── Beneficios (página /unete) — grid 3x2 sin imagen, ícono encima ─── */
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.benefit-card{
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);
  padding:32px 28px;border-radius:3px;display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease;
}
.benefit-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.benefit-card .benefit-icon{
  display:block;width:48px;height:48px;color:var(--gold-dark);
  margin-bottom:22px;
}
.benefit-card .benefit-icon svg{width:100%;height:100%;stroke-width:1.5}

/* ─── Card icon para cat-cards (/the-world, /disney) — sobre el título en el body ─── */
.cat-card .body .card-icon{
  display:block;width:34px;height:34px;color:var(--gold-dark);
  margin:0 0 14px;
}
.cat-card .body .card-icon svg{width:100%;height:100%;stroke-width:1.5}
.benefit-card h3{font-size:19px;margin-bottom:10px;letter-spacing:-.1px}
.benefit-card p{color:var(--muted);font-size:14.5px;line-height:1.6}

/* ─── Proceso 3 columnas (/unete usa cols-3) ─── */
.process.cols-3{grid-template-columns:repeat(3,1fr)}

/* ─── Checklist editorial (/unete sección 'Para quién') ─── */
.checklist{
  list-style:none;padding:0;margin:32px 0 0;
  display:flex;flex-direction:column;gap:14px;
}
.checklist li{
  display:flex;align-items:flex-start;gap:14px;
  font-size:16.5px;line-height:1.6;color:var(--text);
  padding:8px 0;
}
.checklist li::before{
  content:"✦";color:var(--gold-dark);font-size:18px;line-height:1.6;flex-shrink:0;
}

/* ─── Página sobre-mi · ritmo editorial ───
   Cada about-section mantiene su padding-top completo aun después de otra
   about-section. Las páginas alternan colores de fondo, y queremos que el
   eyebrow respire dentro de su bloque de color, no que pegue al borde. */
.about-section{padding:104px 0}
.about-section .eyebrow{margin-bottom:22px}
.about-section h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:28px;text-align:left}
.about-section h2 em{color:var(--gold-dark)}
.about-section .gold-divider{margin:0 0 36px}
.about-section p{color:var(--text);font-size:16.5px;line-height:1.75;margin-bottom:20px}
.about-section p em{color:var(--gold-dark);font-style:italic;font-family:'Playfair Display',serif}
.about-section .pull{
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--gold-dark);font-size:22px;line-height:1.5;margin:40px 0;
  padding-left:24px;border-left:2px solid var(--gold);
}

/* ─── Contacto ─── */
.contact-grid{
  display:grid;grid-template-columns:1fr 1.2fr;gap:48px;margin-top:48px;
}
.contact-card{
  background:#fff;border:1px solid var(--line);border-radius:3px;padding:36px 32px;
}
.contact-method{
  display:flex;align-items:flex-start;gap:16px;padding:18px 0;
  border-bottom:1px solid var(--line);
}
.contact-method:last-child{border-bottom:none}
.contact-method .ico{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;
  background:var(--cream-soft);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--gold-dark);
}
.contact-method .ico svg{width:18px;height:18px}
.contact-method h4{font-family:'Lato',sans-serif;font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:4px}
.contact-method p{font-size:15px;color:var(--navy)}
.contact-method a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--gold)}
.contact-method a:hover{color:var(--gold-dark)}
.form-card{background:#fff;border:1px solid var(--line);border-radius:3px;padding:36px 32px}
.form-card h3{font-size:22px;margin-bottom:6px}
.form-card .form-sub{color:var(--muted);font-size:14px;margin-bottom:24px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.alt-form-note{
  margin-top:24px;font-size:13px;color:var(--muted);text-align:center;line-height:1.55;
}
.alt-form-note a{color:var(--gold-dark);border-bottom:1px solid var(--line);text-decoration:none}
.alt-form-note a:hover{border-color:var(--gold-dark)}

/* ─── Footer ─── */
.site-footer{
  background:var(--navy);color:var(--cream);padding:72px 24px 32px;margin-top:0;
}
.site-footer .inner{max-width:1180px;margin:0 auto}
.site-footer .top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;margin-bottom:48px}
.site-footer .brand-block .brand{font-size:30px}
.site-footer .brand-block .tagline{
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--gold-light);font-size:17px;margin-top:14px;line-height:1.5;
}
.site-footer h5{
  font-family:'Lato',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:18px;
}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:10px}
.site-footer a{color:var(--cream);text-decoration:none;font-size:14px;opacity:.85;transition:opacity .15s ease}
.site-footer a:hover{opacity:1;color:var(--gold-light)}
.site-footer .divider{height:1px;background:rgba(245,242,236,.12);margin:32px 0}
.site-footer .certs-row{
  font-size:12.5px;color:var(--cream);opacity:.75;text-align:center;
  line-height:1.7;letter-spacing:.2px;
}
.site-footer .bottom{
  text-align:center;font-size:11.5px;color:var(--cream);opacity:.55;
  margin-top:28px;letter-spacing:.3px;
}

/* ─── Responsive ─── */
@media (max-width: 960px){
  section.block{padding:96px 0}
  section.block.tight{padding:72px 0}
  .about-section{padding:80px 0}
  .worlds{grid-template-columns:1fr;gap:20px}
  .process{grid-template-columns:1fr;gap:20px}
  .testimonials{grid-template-columns:1fr}
  .about-preview{grid-template-columns:1fr;gap:32px}
  .about-preview .photo{aspect-ratio:4/3;max-width:520px;margin:0 auto}
  .cat-grid,.cat-grid.cols-3{grid-template-columns:1fr 1fr}
  .benefit-grid{grid-template-columns:1fr 1fr}
  .process.cols-3{grid-template-columns:1fr}
  .certs{grid-template-columns:1fr 1fr}
  /* Tablet: 2 cards por fila en el grid 3-col (flex con basis recalculado).
     5 cards → 2+2+1 con la última centrada por justify-content:center. */
  .certs.certs-3col > .cert{
    flex-basis:calc((100% - 20px) / 2);
    max-width:calc((100% - 20px) / 2);
  }
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .site-footer .top{grid-template-columns:1fr 1fr;gap:32px}
  .site-footer .brand-block{grid-column:1/-1}
}
@media (max-width: 720px){
  .site-header .brand-mark img.brand-logo{height:38px}
  .site-footer .brand-block img.brand-logo{height:28px}
  .utility-bar .ub-inner{
    padding:7px 14px;gap:10px;justify-content:center;
  }
  .utility-bar a{font-size:9.5px;letter-spacing:1px}
  .utility-bar .sep{font-size:10px}
  .site-header nav.primary,.site-header .socials,.site-header .cta-header{display:none}
  .menu-toggle{display:inline-flex}
  .hero{min-height:72vh;padding:96px 24px 80px}
  .cat-grid,.cat-grid.cols-3{grid-template-columns:1fr}
  .benefit-grid{grid-template-columns:1fr}
  .certs{grid-template-columns:1fr}
  /* Mobile: 1 card por fila + cierre con más respiro + dividers compactos. */
  .certs.certs-3col > .cert{flex-basis:100%;max-width:100%}
  .cert-closing{margin-top:56px}
  .cat-divider{margin-top:24px;height:18px}
  .form-row{grid-template-columns:1fr}
  section.block{padding:72px 0}
  section.block.tight{padding:56px 0}
  .about-section{padding:64px 0}
  section.block h2{margin-bottom:24px}
  section.block .gold-divider.center{margin:0 auto 30px}
  .about-section h2{margin-bottom:22px}
  .about-section .gold-divider{margin:0 0 28px}
  .site-footer .top{grid-template-columns:1fr}
  .site-footer{padding:56px 24px 28px}
}

/* ─── Mobile menu drawer ─── */
.mobile-menu{
  position:fixed;inset:0;z-index:100;background:var(--navy);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;
  transform:translateX(100%);transition:transform .28s ease;
  padding:80px 24px 40px;
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a{
  font-family:'Playfair Display',serif;font-size:26px;color:var(--cream);
  text-decoration:none;font-weight:400;
}
.mobile-menu a:hover{color:var(--gold-light)}
.mobile-menu .socials-row{display:flex;gap:22px;margin-top:24px}
.mobile-menu .socials-row a{color:var(--gold-light);font-size:0}
.mobile-menu .socials-row svg{width:24px;height:24px;color:var(--gold-light)}
.mobile-menu .cta{margin-top:20px}
.mobile-menu .close{
  position:absolute;top:22px;right:22px;background:none;border:none;cursor:pointer;
  color:var(--cream);padding:6px;
}
.mobile-menu .close svg{width:26px;height:26px}
body.menu-open{overflow:hidden}