/* ===== Reset ===== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* ===== Base ===== */
body{
  font-family:Arial, sans-serif;
  background:#fff;
  color:#000;
  text-align:center;
}

/* ===== Header ===== */
header{
  background:#fff;
  padding:40px 20px;
}
header h1{
  font-size:5em;
  font-family:"Poppins", sans-serif;
  font-weight:800;
  color:#000;
  text-transform:uppercase;
  letter-spacing:4px;
  text-shadow:2px 2px 5px rgba(0,0,0,.2);
}
.logo{
  max-width:120px;
  margin-bottom:15px;
}

/* =========================
   Subtítulo adaptable
   ========================= */
.Subtitulo-menu{
  margin-block-start:clamp(8px, 1.9vh, 24px);
  margin-block-end:0;
  color:#000;
  font-weight:900;
  text-transform:uppercase;
  list-style:none;
  padding-inline-start:var(--subt-indent);
  margin:.25rem 0;
  font-size:var(--subt-font);
  letter-spacing:var(--subt-track);
  line-height:1.1;
  text-wrap:balance;
  transition:letter-spacing .2s ease, transform .2s ease;
}
.Subtitulo-menu::marker{ content:""; }
.Subtitulo-menu:hover{
  letter-spacing:calc(var(--subt-track) + .02em);
  transform:translateX(2px);
}
@media (prefers-reduced-motion: reduce){
  .Subtitulo-menu{ transition:none; }
  .Subtitulo-menu:hover{ transform:none; }
}

/* Contenedor de lista del subtítulo */
.menu-lista{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Ajustes por container (si lo usas en tu HTML con container-type) */
@container (min-width:420px){
  .Subtitulo-menu{
    --subt-font:clamp(1rem, .8rem + .6vw, 1.6rem);
    --subt-indent:clamp(16px, 2vw, 52px);
  }
}
@container (min-width:800px){
  .Subtitulo-menu{
    --subt-font:clamp(1.1rem, .6rem + .9vw, 1.8rem);
    --subt-indent:clamp(20px, 1.6vw, 56px);
  }
}






/* Brillo barrido */
.Subtitulo-menu::after{
  content:attr(data-text);
  position:absolute; inset:0;
  background:linear-gradient(120deg,
    transparent 0%,
    rgba(0,255,128,0) 35%,
    rgba(0,255,128,.95) 50%,
    rgba(0,255,128,0) 65%,
    transparent 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-size:200% 100%;
  animation:shineSweep 2.4s linear infinite;
}
@keyframes shineSweep{
  from{ background-position:-120% 0; }
  to  { background-position:120% 0; }
}
@media (prefers-reduced-motion: reduce){
  .Subtitulo-menu::after{ animation:none; }
}

/* ===== Subtítulo (botón) ===== */
.subtitulo{
  background:linear-gradient(90deg,#0c6,#00cc66);
  color:#fff;
  padding:12px 25px;
  font-size:1.4em;
  border-radius:12px;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:2px;
  box-shadow:0 0 15px rgba(0,204,102,.5);
  display:inline-block;
  margin:15px auto;
  cursor:pointer;
}

/* ===== Grid Menú principal ===== */
.menu{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  padding:60px;
  justify-items:center;
}

/* ===== Tarjeta de opción ===== */
.opcion{
  position:relative;
  cursor:pointer;
  overflow:hidden;
  border-radius:18px;
  transition:transform .25s ease, box-shadow .25s ease, border .25s ease;
  background:#fff;
  box-shadow:0 4px 15px rgba(0,0,0,.1);
  width:100%;
  max-width:350px;
  border:3px solid transparent;
}
.opcion img{
  width:100%;
  height:240px;
  object-fit:cover;
  border-radius:18px;
  transition:transform .3s ease;
}
.opcion:hover img,
.opcion:focus img,
.opcion:active img{ transform:scale(1.08); }
.opcion:hover,
.opcion:focus,
.opcion:active{
  transform:scale(1.03);
  box-shadow:0 0 25px rgba(0,204,102,.6);
  border-color:#0c6;
}
.opcion p{
  position:absolute;
  bottom:15px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.6);
  color:#fff;
  padding:8px 18px;
  border-radius:10px;
  font-size:1.1em;
  font-weight:700;
  margin:0;
  backdrop-filter:blur(2px);
}

/* ===== Utilidades ===== */
.verde{ color:#0c6; }

/* ===== Footer global (se mantiene para páginas sin .ws-footer) ===== */
footer{
  background:#0c6;
  color:#fff;
  padding:25px;
  font-weight:700;
  margin-top:50px;
}

/* ===== Enlaces legales / info (footer simple) ===== */
.footer-link{
  display:inline-block;
  margin:10px 20px;
  color:#333;
  font-family:"Montserrat","Helvetica",sans-serif;
  font-weight:500;
  font-size:1em;
  letter-spacing:1px;
  text-decoration:none;
  transition:transform .3s ease;
  user-select:text;
}
.footer-link:hover{ transform:translateY(-2px); }

/* =========================
   Responsive (mobile-first)
   ========================= */
:root{
  --h1-size:clamp(1.8rem, 4vw + 1rem, 2.4rem);
  --sub-size:clamp(1rem, 2.2vw + .6rem, 1.2rem);
  --gap:clamp(14px, 4vw, 24px);
  --pad:clamp(18px, 5vw, 28px);
}

/* Base móviles */
header h1{ font-size:var(--h1-size); }
.subtitulo{
  font-size:var(--sub-size);
  padding:8px 14px;
  border-radius:8px;
  letter-spacing:.8px;
}
.logo{ width:64px; }
.menu{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap);
  padding:var(--pad);
}
.opcion{ max-width:440px; margin:0 auto; }
.opcion img{
  width:100%;
  height:clamp(150px, 36vw, 190px);
  object-fit:cover;
  border-radius:18px;
}
.opcion p{ font-size:.95em; }
.footer-link{
  display:block;
  margin:6px 0;
  font-size:.9em;
}

/* ≥480px */
@media (min-width:480px){
  :root{
    --h1-size:clamp(2rem, 3.2vw + 1rem, 2.6rem);
    --sub-size:clamp(1.05rem, 1.6vw + .7rem, 1.25rem);
  }
  .logo{ width:72px; }
  .opcion{ max-width:520px; }
  .opcion img{ height:clamp(170px, 32vw, 210px); }
}

/* ≥600px */
@media (min-width:600px){
  :root{
    --gap:clamp(18px, 3vw, 28px);
    --pad:clamp(20px, 4vw, 36px);
  }
  .menu{ grid-template-columns:repeat(2,1fr); }
  .footer-link{
    display:inline-block;
    margin:6px 12px;
    font-size:.95em;
  }
  .logo{ width:78px; }
}

/* ≥768px */
@media (min-width:768px){
  :root{
    --h1-size:clamp(2.2rem, 2.2vw + 1.2rem, 3rem);
    --sub-size:clamp(1.1rem, 1.2vw + .7rem, 1.3rem);
  }
  .menu{ gap:28px; padding:40px; }
  .opcion img{ height:clamp(200px, 28vw, 240px); }
  .logo{ width:90px; }
}

/* ≥1024px */
@media (min-width:1024px){
  .menu{
    grid-template-columns:repeat(3,1fr);
    gap:32px;
    padding:48px;
  }
  .logo{ width:110px; }
  .subtitulo{ padding:10px 20px; letter-spacing:1px; }
}

/* =========================
   (Nota) Bloque mobile alterno
   — Este bloque existe en tu CSS y OVERRIDES algunos valores base
   — Lo conservamos para NO cambiar tu diseño actual.
   ========================= */
:root{
  --h1-size:clamp(1.8rem, 4vw + 1rem, 2.4rem);
  --sub-size:clamp(1rem, 2.2vw + .6rem, 1.2rem);
  --gap:clamp(14px, 4vw, 24px);
  --pad:clamp(18px, 5vw, 28px);
}
header h1{ font-size:var(--h1-size); }
.subtitulo{
  font-size:var(--sub-size);
  padding:8px 14px;
  border-radius:8px;
  letter-spacing:.8px;
}
.logo{ width:64px; }
.menu{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;                    /* override que ya usabas */
  padding:10px;                /* override que ya usabas */
}
.opcion{ max-width:440px; margin:0 auto; }
.opcion img{
  width:100%;
  height:auto;                 /* override que ya usabas */
  object-fit:cover;
}
.opcion p{ font-size:.95em; }
.footer-link{
  display:block;
  margin:6px 0;
  font-size:.9em;
}
/* ≥480px */
@media (min-width:480px){
  :root{
    --h1-size:clamp(2rem, 3.2vw + 1rem, 2.6rem);
    --sub-size:clamp(1.05rem, 1.6vw + .7rem, 1.25rem);
  }
  .logo{ width:72px; }
  .opcion{ max-width:520px; }
  .opcion img{ height:clamp(170px, 32vw, 210px); }
}
/* ≥600px */
@media (min-width:600px){
  :root{
    --gap:clamp(18px, 3vw, 28px);
    --pad:clamp(20px, 4vw, 36px);
  }
  .menu{ grid-template-columns:repeat(2,1fr); }
  .footer-link{
    display:inline-block;
    margin:6px 12px;
    font-size:.95em;
  }
  .logo{ width:78px; }
}
/* ≥768px */
@media (min-width:768px){
  :root{
    --h1-size:clamp(2.2rem, 2.2vw + 1.2rem, 3rem);
    --sub-size:clamp(1.1rem, 1.2vw + .7rem, 1.3rem);
  }
  .menu{ gap:28px; padding:40px; }
  .opcion img{ height:clamp(200px, 28vw, 240px); }
  .logo{ width:90px; }
}
/* ≥1024px */
@media (min-width:1024px){
  .menu{
    grid-template-columns:repeat(3,1fr);
    gap:32px;
    padding:48px;
  }
  .logo{ width:110px; }
  .subtitulo{ padding:10px 20px; letter-spacing:1px; }
}
.ws-footer__location {
  margin-top: 1.5rem;
}

.ws-footer__location-title {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 0.25rem;
}

.ws-footer__location-text {
  font-size: 0.9rem;
  color: #e5e7eb;
  margin-bottom: 0.75rem;
}

.ws-footer__map {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
}

.ws-footer__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Responsivo para pantallas chicas */
@media (max-width: 768px) {
  .ws-footer__grid--layout {
    flex-direction: column;
  }

  .ws-footer__cols {
    flex-direction: column;
  }

  .ws-footer__map {
    max-width: 100%;
  }
}
/* =========================
   Sidebar (#sidebar-root) — sólo scope dentro del contenedor
   ========================= */
.menu-btn{
  position:fixed; top:17px; left:20px;
  z-index:10050; cursor:pointer;
  background:transparent; border:0; padding:6px; border-radius:10px;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:44px; height:44px;
  transition:transform .2s ease;
}
.menu-btn .linea{
  display:block; width:28px; height:3px; background:#111; border-radius:3px;
  margin:3px 0; transition:transform .25s ease, background .2s ease;
}
.menu-btn:hover,
.menu-btn:active{
  background:transparent !important;
  box-shadow:none !important;
}
.menu-btn:hover .linea{ background:#0c6; transform:scaleX(1.12); }
.menu-btn:active .linea{ background:#0c6; transform:scaleX(1); }

/* Panel lateral */
#sidebar-root .menu-lateral{
  position:fixed; top:0; left:-100% !important;
  width:260px; max-width:92vw; height:100vh;
  background:#fff; z-index:10040; overflow-y:auto;
  box-shadow:4px 0 20px rgba(0,0,0,.18);
  padding:22px 18px; opacity:0; transform:translateX(-14px);
  transition:left .28s ease, opacity .26s ease, transform .26s ease;
  will-change:left, opacity, transform;
  font-family:inherit;
}
#sidebar-root .menu-lateral.abierto{
  left:0 !important; opacity:1; transform:translateX(0);
}

/* --- CERRAR (X) --- */
#sidebar-root .cerrar-btn {
  position: absolute;        /* en lugar de float:right */
  top: 16px;                 /* ajusta esta distancia desde arriba del sidebar */
  right: 16px;               /* ajusta esta distancia desde el borde derecho */
  z-index: 10060;            /* asegúrate que quede arriba dentro del panel */

  background: none;          /* sin fondo inicial */
  border: none;              /* sin borde */
  font-size: 26px;           /* tamaño del ícono/letra X */
  color: #0a0a0a;            /* color normal */
  cursor: pointer;           /* cursor manita */
  line-height: 1;            /* evita que el botón crezca raro verticalmente */
  padding: 2px 6px;          /* área clickeable más cómoda */
  border-radius: 8px;        /* bordes redondeados al hover */
  transition: background .2s ease, color .2s ease; /* animación suave */
  user-select: none;         /* evita que al hacer click cambie el cursor a selección de texto */
}

#sidebar-root .cerrar-btn:hover {
  background: rgba(0,0,0,.06); /* fondito leve en hover */
  color: #0c6;                 /* verde en hover */
}

/* Lista */
#sidebar-root .menu-lista{
  list-style:none; margin:44px 0 0; padding:0; text-align:left;
}
#sidebar-root .titulo-menu{
  font-size:.85rem; font-weight:700; letter-spacing:.20em; text-transform:uppercase;
  color:#111; opacity:.65; margin:0 0 8px 2px;
}
#sidebar-root .etiqueta{
  font-size:.86rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  color:#0a0a0a; opacity:.88; margin:12px 0 4px 2px;
}
#sidebar-root .menu-lista li{ margin:0; padding:0; }
#sidebar-root .menu-lista li + li{ margin-top:6px; }
#sidebar-root .menu-lista li{ margin-top:10px; } /* override tuyo conservado */
#sidebar-root .menu-lista a{
  display:block; text-decoration:none; color:#0a0a0a; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; font-size:.95rem; line-height:1.25;
  padding:8px 10px 8px 28px; border-radius:6px; position:relative;
  transition:color .15s ease, background .15s ease, transform .15s ease;
}
#sidebar-root .menu-lista a::before{ content:none !important; }
#sidebar-root .menu-lista a::after{
  content:""; position:absolute; left:0; bottom:2px;
  width:40%; height:2px; background:#0c6;
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
  padding-left:19px;
}
#sidebar-root .menu-lista a:hover{ color:#0c6; }
#sidebar-root .menu-lista a:hover::after{ transform:scaleX(1); }
#sidebar-root .menu-lista a[aria-current="page"],
#sidebar-root .menu-lista a.is-active{ color:#0a0a0a; }
#sidebar-root .menu-lista a[aria-current="page"]::after,
#sidebar-root .menu-lista a.is-active::after{ transform:scaleX(1); }

/* Footer dentro del panel */
#sidebar-root .menu-footer{
  margin-top:18px; padding-top:12px; border-top:1px solid rgba(0,0,0,.08);
}
#sidebar-root .menu-footer .footer-link{
  display:block; margin:6px 0; color:#0c6; text-decoration:none; font-weight:800;
  letter-spacing:.02em; text-transform:uppercase; transition:opacity .15s ease, transform .15s ease;
}
#sidebar-root .menu-footer .footer-link:hover{ opacity:.85; transform:translateX(2px); }

/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #sidebar-root .menu-lateral,
  .menu-btn, .flecha-flotante,
  #sidebar-root .menu-lista a, #sidebar-root .cerrar-btn{
    transition:none !important;
  }
}

/* ===== Bloque responsive alterno (base móvil) — conserva overrides ===== */
:root{
  --h1-size:clamp(1.8rem, 4vw + 1rem, 2.4rem);
  --sub-size:clamp(1rem, 2.2vw + .6rem, 1.2rem);
  --gap:clamp(14px, 4vw, 24px);
  --pad:clamp(18px, 5vw, 28px);
}
header h1{ font-size:var(--h1-size); }
.subtitulo{
  font-size:var(--sub-size);
  padding:8px 14px; border-radius:8px; letter-spacing:.8px;
}
.logo{ width:64px; }
.menu{
  display:grid; grid-template-columns:1fr; gap:10px; padding:10px; /* override */
}
.opcion{ max-width:440px; margin:0 auto; }
.opcion img{ width:100%; height:auto; object-fit:cover; }
.opcion p{ font-size:.95em; }
.footer-link{ display:block; margin:6px 0; font-size:.9em; }
@media (min-width:480px){
  :root{
    --h1-size:clamp(2rem, 3.2vw + 1rem, 2.6rem);
    --sub-size:clamp(1.05rem, 1.6vw + .7rem, 1.25rem);
  }
  .logo{ width:72px; }
  .opcion{ max-width:520px; }
  .opcion img{ height:clamp(170px, 32vw, 210px); }
}
@media (min-width:600px){
  :root{ --gap:clamp(18px, 3vw, 28px); --pad:clamp(20px, 4vw, 36px); }
  .menu{ grid-template-columns:repeat(2,1fr); }
  .footer-link{ display:inline-block; margin:6px 12px; font-size:.95em; }
  .logo{ width:78px; }
}
@media (min-width:768px){
  :root{
    --h1-size:clamp(2.2rem, 2.2vw + 1.2rem, 3rem);
    --sub-size:clamp(1.1rem, 1.2vw + .7rem, 1.3rem);
  }
  .menu{ gap:28px; padding:40px; }
  .opcion img{ height:clamp(200px, 28vw, 240px); }
  .logo{ width:90px; }
}
@media (min-width:1024px){
  .menu{ grid-template-columns:repeat(3,1fr); gap:32px; padding:48px; }
  .logo{ width:110px; }
  .subtitulo{ padding:10px 20px; letter-spacing:1px; }
}

/* ===== Modal ===== */
.modal-overlay{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.5);
  z-index:11000;
  opacity:0;
  transition:opacity .18s ease;
}
.modal-overlay.is-open{ display:flex; opacity:1; }
.modal{
  width:min(90vw, 460px);
  background:#fff; border-radius:14px; padding:18px;
  box-shadow:0 15px 40px rgba(0,0,0,.22);
  transform:translateY(8px) scale(.985);
  transition:transform .18s ease;
  position:relative;
}
.modal-overlay.is-open .modal{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute; top:10px; right:12px;
  border:0; background:transparent; font-size:26px; line-height:1;
  cursor:pointer; color:#111; border-radius:8px; padding:2px 6px;
}
.modal-close:hover{ color:#0c6; background:rgba(0,0,0,.06); }
.modal h2{ margin:4px 0 2px; font-size:1.3rem; font-weight:800; }
.modal-sub{ color:#444; margin-bottom:12px; }
.modal-list{
  display:grid; gap:16px; margin-top:10px;
}
.modal-item{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:46px; padding:12px 14px; text-align:center;
  background:#0c6; color:#fff; border:1px solid #0c6; border-radius:10px;
  font-weight:900; text-transform:uppercase; letter-spacing:.02em; cursor:pointer;
  transition:transform .08s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.modal-item:hover{
  background:#0aa65a; border-color:#0aa65a; box-shadow:0 0 0 3px rgba(12,198,115,.18);
}
.modal-item:active{ transform:scale(.99); background:#099a54; border-color:#099a54; }
.modal-item:focus{ outline:none; box-shadow:0 0 0 3px rgba(12,198,115,.28); }
@media (max-width:600px){
  .modal{ width:min(94vw, 420px); padding:16px; }
}

/* =========================
   INDEX: Estado "landing"
   ========================= */
.home-landing header{
  min-height:92svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px;
  transition:min-height .28s ease, padding .28s ease, transform .28s ease;
}
.home-landing .subtitulo{ cursor:pointer; }
.home-landing .menu{
  display:none;
  opacity:0;
  transform:translateY(16px);
  height:0;
  max-height:0;
  overflow:hidden;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .32s ease, transform .32s ease, max-height .48s cubic-bezier(.2,.7,0,.99), visibility 0s linear .32s;
}
.menu{ will-change:transform, opacity; }
@media (prefers-reduced-motion: reduce){
  .home-landing header,
  .home-landing .menu{ transition:none !important; }
}

/* ===== Footer (.ws-footer) — limpio y sin conflictos ===== */

/* Reset del <footer> para no heredar fondos/padding globales */
footer.ws-footer{
  background: transparent;
  padding: 0;
  font-weight: 400;
  color: inherit;
}

/* Base y variables */
.ws-footer{
  --wrap: 1100px;
  --gutter: 18px;
  font-family: inherit;
}

/* Barra verde (full width) */
.ws-footer__bar{ background:#0c6; }
.ws-footer__inner{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 10px var(--gutter);
}

/* Redes sociales — disco negro + pictograma verde */
.ws-footer__social{
  display:flex; justify-content:center; align-items:center;
  gap:12px; flex-wrap:wrap;
}
.ws-footer .ws-soc{
  width:36px; height:36px;
  border-radius:9999px;
  background:#0a0a0a;          /* disco negro */
  color:#0c6;                   /* icono verde */
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; line-height:0; border:0;
  box-shadow:none;
  text-decoration:none;
  transition: transform .12s ease, color .12s ease, background .12s ease;
}
.ws-footer .ws-soc svg{ width:18px; height:18px; display:block; }
.ws-footer .ws-soc:hover{ color:#12e08b; transform:translateY(-1px); }
.ws-footer .ws-soc:active{ transform:translateY(0); }
.ws-footer .ws-soc *{ box-sizing:border-box; }

@media (prefers-reduced-motion: reduce){
  .ws-footer .ws-soc{ transition:none !important; }
}

/* Panel negro (full width) con contenido centrado */
.ws-footer__panel{ background:#0a0a0a; color:#fff; }
.ws-footer__container{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 22px var(--gutter) 16px;
}

/* Grid de contenido */
.ws-footer__grid{
  display:grid; align-items:flex-start; gap:18px;
  grid-template-columns:1fr; /* móvil */
}
.ws-footer__brand{ display:inline-flex; align-items:center; justify-content:center; }
.ws-footer__logo{
  width:120px; height:auto; object-fit:contain;
  filter:brightness(0) invert(1);
}

/* Enlaces (por defecto: columna izquierda fuerte) */
.ws-footer__col .ws-list{ list-style:none; margin:0; padding:0; }
.ws-list li{ margin:10px 0; }
.ws-list a{
  color:#fff; text-decoration:none; font-weight:800;
  text-transform:uppercase; letter-spacing:.02em;
  transition: color .15s ease, transform .12s ease;
}
.ws-list a:hover{ color:#0c6; transform:translateX(2px); }

/* Responsive: listas alineadas a la izquierda en pantallas chicas */
@media (max-width: 767px){
  .ws-footer__col .ws-list{ text-align:left; }
  .ws-footer__col .ws-list a:hover{ transform:none; } /* sin “brinco” en móvil */
}

/* SOLO la columna derecha (links legales) más fina/pequeña */
.ws-footer__grid > nav.ws-footer__col:last-of-type .ws-list{
  text-align:left;
}
.ws-footer__grid > nav.ws-footer__col:last-of-type .ws-list a{
  font-weight:500;              /* más fino */
  font-size:.95rem;             /* un poco más pequeño */
  letter-spacing:.01em;
  line-height:1.4;
}
.ws-footer__grid > nav.ws-footer__col:last-of-type .ws-list a:hover{
  transform:none;               /* hover sin desplazamiento aquí */
}

/* Regla y copy */
.ws-rule{
  border:0; height:1px; background:rgba(255,255,255,.16);
  margin:18px 0 10px;
}
.ws-copy{ text-align:center; color:#cfcfcf; font-size:.9rem; }

/* Breakpoints */
@media (min-width: 768px){
  .ws-footer__grid{ grid-template-columns:240px 1fr 1fr; }
  .ws-footer__brand{ justify-content:flex-start; }
}
@media (min-width: 1024px){
  .ws-footer__logo{ width:140px; }
}
/* Columna de MENÚ (los links gruesos): alinear a la izquierda siempre */
.ws-footer__grid > nav.ws-footer__col[aria-label="Menú"] .ws-list{
  text-align: left !important;
}

/* Evita “saltitos” si tenías un translateX en hover */
.ws-footer__grid > nav.ws-footer__col[aria-label="Menú"] .ws-list a{
  display: inline-block;
}
.ws-footer__grid > nav.ws-footer__col[aria-label="Menú"] .ws-list a:hover{
  transform: none;
}
/* ===== ULTRA-FIX CATÁLOGO: coherencia de alturas por breakpoint ===== */

/* reglas base para la imagen dentro de la tarjeta */
/* Tarjeta del menú: contenedor responsive */
html body .menu .opcion{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  /* Mantén una proporción estable a cualquier ancho.
     Si las ves muy altas/bajas puedes cambiar a 16 / 9 o 5 / 4 */
  aspect-ratio: 4 / 3;
}

/* Imagen dentro de la tarjeta: llena el contenedor sin deformarse */
html body .menu .opcion img{
  display: block;
  width: 100%;
  height: 100%;        /* se ajusta a la tarjeta */
  object-fit: cover;   /* recorta sin deformar */
  border-radius: 18px; /* opcional, por si quieres que siga teniendo el radio en la imagen */
}

/* Rótulo encima de la foto (igual que ya tenías) */
html body .menu .opcion p{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 18px;
  border-radius: 10px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-weight: 700;
  z-index: 2;
  backdrop-filter: blur(2px);
}

/* 🔴 IMPORTANTE: elimina por completo estos media queries viejos,
   porque son los que “amarran” la altura y rompen el responsive */

 /*
@media (max-width: 479.98px){
  html body .menu .opcion img{
    height:auto !important;
  }
}

@media (min-width: 480px) and (max-width: 767.98px){
  html body .menu .opcion img{
    height: clamp(170px, 32vw, 210px) !important;
  }
}

@media (min-width: 768px){
  html body .menu .opcion img{
    height: clamp(200px, 28vw, 240px) !important;
  }
}
*/


/* === OVERRIDES: Logo protagonista (sin tocar la lógica) ================== */
/* Tamaños mínimos/máximos en ambos estados; ajustables en un solo lugar */
:root{
  --logo-open-min: 140px;   /* tamaño al abrir el catálogo */
  --logo-open-max: 260px;
  --logo-landing-min: 220px;/* tamaño en landing (antes del clic) */
  --logo-landing-max: 420px;
}

/* 1) El H1 sigue existiendo (SEO/accesibilidad), pero no se ve */
header h1{
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; border: 0 !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
}

/* 2) Logo como “título”: grande, fluido y con transición suave */
header .logo{
  display:block;
  max-width: none;                 /* anula max-width previos */
  height:auto;
  /* tamaño por defecto (estado abierto) */
  width: clamp(var(--logo-open-min), 18vw, var(--logo-open-max));
  transition: width .28s ease;
   margin-inline: auto;          /* centra en navegadores modernos */
  margin-left: auto;            /* fallback */
  margin-right: auto;           /* fallback */
}
header{ text-align: center; }

/* 3) En landing (antes de abrir), aún más grande */
.home-landing header .logo{
  width: clamp(var(--logo-landing-min), 32vw, var(--logo-landing-max));
}

/* 4) Micro-ajustes de responsividad extrema (opcionales) */
@media (max-width: 360px){
  header .logo{ width: min(72vw, var(--logo-open-max)); }
  .home-landing header .logo{ width: min(80vw, var(--logo-landing-max)); }
}
@media (min-width: 1440px){
  .home-landing header .logo{ width: clamp(280px, 28vw, 480px); }
}

/* === OVERRIDE: Animación de “flotar” para el logo ======================= */
:root{
  /* Amplitud y velocidad (ajústalo a tu gusto) */
  --float-amp-open: 12px;       /* al abrir el menú */
  --float-amp-landing: 22px;    /* en landing: más marcada */
  --float-speed: 3.8s;
  --float-tilt: 2.2deg;         /* leve inclinación */
}

/* Estado por defecto (catálogo abierto) */
header .logo{
  /* ya está centrado y con width responsive por tus overrides previos */
  --float-amp: var(--float-amp-open);
  animation: logoFloat var(--float-speed) ease-in-out infinite;
  will-change: transform;
  transform-origin: 50% 60%;
}

/* En landing (antes del clic), más grande y con más “flote” */
.home-landing header .logo{
  --float-amp: var(--float-amp-landing);
}

/* Animación */
@keyframes logoFloat{
  0%   { transform: translateY(0) rotate(0); }
  25%  { transform: translateY(calc(-1 * var(--float-amp))) rotate(var(--float-tilt)); }
  50%  { transform: translateY(0) rotate(0); }
  75%  { transform: translateY(calc(var(--float-amp) * 0.35)) rotate(calc(-1 * var(--float-tilt))); }
  100% { transform: translateY(0) rotate(0); }
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  header .logo{ animation: none !important; }
}
/* === OVERRIDES: Escala fluida continua y más grande en anchos altos ==== */
/* Base (ambos estados): definimos límites y “pendiente” por vw */
:root{
  /* límites cómodos por defecto */
  --logo-open-min: 180px;
  --logo-open-max: 520px;
  --logo-landing-min: 320px;
  --logo-landing-max: 880px;

  /* “pendiente” (qué tanto crece por ancho de ventana) */
  --logo-open-vw: 22vw;
  --logo-landing-vw: 36vw;
}

/* Aplicamos las variables anteriores a cada estado */
header .logo{
  width: clamp(var(--logo-open-min), var(--logo-open-vw), var(--logo-open-max));
}
.home-landing header .logo{
  width: clamp(var(--logo-landing-min), var(--logo-landing-vw), var(--logo-landing-max));
}

/* Escala progresiva: a mayor ancho, subimos la pendiente y el tope */
@media (min-width: 1024px){
  :root{
    --logo-open-vw: 24vw;         /* más agresivo */
    --logo-landing-vw: 40vw;
    --logo-open-max: 620px;       /* tope mayor */
    --logo-landing-max: 1000px;
  }
}
@media (min-width: 1366px){
  :root{
    --logo-open-vw: 26vw;
    --logo-landing-vw: 42vw;
    --logo-open-max: 700px;
    --logo-landing-max: 1120px;
  }
}
@media (min-width: 1600px){
  :root{
    --logo-open-vw: 28vw;
    --logo-landing-vw: 44vw;
    --logo-open-max: 780px;
    --logo-landing-max: 1240px;
  }
}
@media (min-width: 1920px){
  :root{
    --logo-open-vw: 30vw;
    --logo-landing-vw: 46vw;
    --logo-open-max: 860px;
    --logo-landing-max: 1360px;
  }
}

/* Conserva el look que te gustó en móviles chicos */
@media (max-width: 480px){
  .home-landing header .logo{
    width: clamp(var(--logo-landing-min), 86vw, var(--logo-landing-max));
  }
  header .logo{
    width: clamp(var(--logo-open-min), 74vw, var(--logo-open-max));
  }
}

/* Garantiza centrado en todos los estados (por si alguna regla pelea) */
body:not(.home-landing) header{
  display: grid; justify-items: center; text-align: center;
}
header .logo{ margin-left:auto !important; margin-right:auto !important; }
/* === FIX: evitar que el logo se recorte arriba en anchos chicos ======== */
/* Respeta notches (iOS) y la amplitud de la animación */
/* === OVERRIDES FINALES: logo centrado siempre ========================== */
/* === OVERRIDES FINALES — LOGO PROTAGONISTA ============================= */
/* Tamaños y dinámica globales */
:root{
  /* Límites base */
  --logo-open-min: 180px;
  --logo-open-max: 520px;
  --logo-landing-min: 320px;
  --logo-landing-max: 880px;

  /* Pendiente de crecimiento por ancho del viewport */
  --logo-open-vw: 22vw;
  --logo-landing-vw: 36vw;

  /* Animación de “flotar” */
  --float-amp-open: 12px;      /* con catálogo abierto */
  --float-amp-landing: 22px;   /* en landing: más marcada */
  --float-speed: 3.8s;
  --float-tilt: 2.2deg;

  /* Safe-area (notch) */
  --safe-top: env(safe-area-inset-top, 0px);
}

/* Oculta visualmente el H1 (SEO ok) para que el logo sea el título visible */
header h1{
  position: absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; border:0 !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important;
}

/* Logo base (estado abierto) */
header .logo{
  display:block;
  max-width:none;
  height:auto;
  width: clamp(var(--logo-open-min), var(--logo-open-vw), var(--logo-open-max));
  margin-left:auto !important;
  margin-right:auto !important;
  transition: width .28s ease;
  /* Flotar */
  --float-amp: var(--float-amp-open);
  animation: logoFloat var(--float-speed) ease-in-out infinite;
  will-change: transform;
  transform-origin: 50% 60%;
}

/* Logo en landing: más grande y mayor “flote” */
.home-landing header .logo{
  width: clamp(var(--logo-landing-min), var(--logo-landing-vw), var(--logo-landing-max));
  --float-amp: var(--float-amp-landing);
}

/* Centrado del header cuando NO es landing (no tocamos tu estado landing) */
body:not(.home-landing) header{
  display:grid;
  justify-items:center;
  text-align:center;
}

/* Animación de flote */
@keyframes logoFloat{
  0%   { transform: translateY(0) rotate(0); }
  25%  { transform: translateY(calc(-1 * var(--float-amp))) rotate(var(--float-tilt)); }
  50%  { transform: translateY(0) rotate(0); }
  75%  { transform: translateY(calc(var(--float-amp) * 0.35)) rotate(calc(-1 * var(--float-tilt))); }
  100% { transform: translateY(0) rotate(0); }
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  header .logo{ animation:none !important; }
}

/* --------- Escala fluida “cada vez más grande” por ancho --------- */
@media (min-width: 1024px){
  :root{
    --logo-open-vw: 24vw;
    --logo-landing-vw: 40vw;
    --logo-open-max: 620px;
    --logo-landing-max: 1000px;
  }
}
@media (min-width: 1366px){
  :root{
    --logo-open-vw: 26vw;
    --logo-landing-vw: 42vw;
    --logo-open-max: 700px;
    --logo-landing-max: 1120px;
  }
}
@media (min-width: 1600px){
  :root{
    --logo-open-vw: 28vw;
    --logo-landing-vw: 44vw;
    --logo-open-max: 780px;
    --logo-landing-max: 1240px;
  }
}
@media (min-width: 1920px){
  :root{
    --logo-open-vw: 30vw;
    --logo-landing-vw: 46vw;
    --logo-open-max: 860px;
    --logo-landing-max: 1360px;
  }
}

/* Mantén el look que te gustó en móviles chicos */
@media (max-width: 480px){
  .home-landing header .logo{
    width: clamp(var(--logo-landing-min), 86vw, var(--logo-landing-max));
  }
  header .logo{
    width: clamp(var(--logo-open-min), 74vw, var(--logo-open-max));
  }
}

/* --------- FIX: evitar recorte superior del logo en anchos muy chicos --- */
.home-landing header{
  padding-top: calc(var(--safe-top) + var(--float-amp-landing) + 28px);
}
body:not(.home-landing) header{
  padding-top: calc(var(--safe-top) + (var(--float-amp-open) * .8) + 18px);
}
/* Extra colchón en ultra-chico */
@media (max-width: 320px){
  .home-landing header{
    padding-top: calc(var(--safe-top) + var(--float-amp-landing) + 36px);
  }
}
/* Hamburguesa respetando notch */
.menu-btn{ top: calc(var(--safe-top) + 12px); }


















/* ========= Página de Aviso de Privacidad ========= */

.privacy-page {
  min-height: 100vh;
  padding: 96px 16px 72px;
  display: flex;
  justify-content: center;
  background: #f9fafb; /* blanco muy pálido */
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.privacy-shell {
  width: 100%;
  max-width: 960px;
}

/* ----- ENCABEZADO ----- */

.privacy-header {
  margin-bottom: 28px;
  text-align: left;
}

.privacy-kicker {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  margin-bottom: 8px;
}

.privacy-title {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.3rem);
  color: #0f172a;
}

.privacy-meta {
  margin: 6px 0 10px;
  font-size: 0.9rem;
  color: #6b7280;
}

.privacy-intro {
  margin: 0;
  max-width: 640px;
  font-size: 0.96rem;
  color: #4b5563;
  line-height: 1.7;
}

/* ----- CARD PRINCIPAL ----- */

.privacy-card {
  margin-top: 20px;
  background: #ffffff;
  border-radius: 18px;
  padding: 22px 24px 26px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.45);
  position: relative;
}

/* brillo suave diagonal */

.privacy-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at top left, rgba(45, 212, 191, 0.16), transparent 55%);
  opacity: 0.9;
  pointer-events: none;
}

/* asegurar contenido por encima del brillo */
.privacy-card > * {
  position: relative;
  z-index: 1;
}

/* ----- ÍNDICE ----- */

.privacy-toc {
  border-radius: 12px;
  padding: 14px 16px;
  background: #f3f4f6;
  border: 1px solid rgba(209, 213, 219, 0.8);
  margin-bottom: 18px;
}

.privacy-toc__title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #4b5563;
}

.privacy-toc ol {
  margin: 0;
  padding-left: 18px;
  column-gap: 32px;
  column-count: 2;
  font-size: 0.9rem;
  color: #4b5563;
}

.privacy-toc li {
  margin-bottom: 4px;
  break-inside: avoid;
}

.privacy-toc a {
  color: #047857;
  text-decoration: none;
}

.privacy-toc a:hover {
  text-decoration: underline;
}

/* ----- SECCIONES ----- */

.privacy-section {
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid rgba(229, 231, 235, 0.9);
}

.privacy-section:first-of-type {
  border-top: none;
  padding-top: 6px;
  margin-top: 8px;
}

.privacy-section__title {
  margin: 0 0 6px;
  font-size: 1rem;
  color: #0f172a;
}

.privacy-section__body {
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.7;
}

.privacy-section__body p {
  margin: 4px 0 8px;
}

.privacy-section__body ul {
  margin: 2px 0 8px 18px;
  padding: 0;
}

.privacy-section__body li {
  margin-bottom: 4px;
}

/* subtítulos internos dentro de secciones */

.privacy-subtitle {
  margin: 4px 0 4px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #111827;
}

/* resaltado dirección / info clave */

.privacy-highlight {
  margin: 6px 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(226, 232, 240, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.7);
  font-size: 0.9rem;
  color: #111827;
}

/* nota final */

.privacy-note {
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 6px;
}

/* enlaces dentro del texto */

.privacy-section__body a {
  color: #047857;
  text-decoration: none;
}

.privacy-section__body a:hover {
  text-decoration: underline;
}

/* ----- RESPONSIVE ----- */

@media (max-width: 900px) {
  .privacy-page {
    padding-top: 84px;
  }

  .privacy-card {
    padding: 20px 16px 22px;
  }

  .privacy-toc ol {
    column-count: 1;
  }
}

@media (max-width: 600px) {
  .privacy-page {
    padding: 80px 12px 64px;
  }

  .privacy-shell {
    max-width: 100%;
  }

  .privacy-intro {
    max-width: none;
  }
}




/* ========= Página de Franquicias ========= */

.franchise-page {
  min-height: 100vh;
  padding: 96px 16px 72px;
  display: flex;
  justify-content: center;
  background: #f9fafb; /* blanco muy pálido */
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.franchise-shell {
  width: 100%;
  max-width: 1120px;
}

/* ----- HERO ----- */

.franchise-hero {
  text-align: left;
  margin-bottom: 28px;
}

.franchise-kicker {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(248, 113, 113, 0.12);
  color: #b91c1c;
  margin-bottom: 8px;
}

.franchise-title {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  color: #0f172a;
}

.franchise-sub {
  margin: 8px 0 4px;
  max-width: 640px;
  font-size: 0.96rem;
  color: #4b5563;
  line-height: 1.7;
}

.franchise-tagline {
  margin: 0;
  font-size: 0.88rem;
  color: #6b7280;
}

/* ----- CONTENEDOR DE SECCIONES ----- */

.franchise-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ----- CARD BASE ----- */

.franchise-card {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  padding: 22px 24px 24px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.45);
}

.franchise-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at top left, rgba(251, 146, 60, 0.18), transparent 55%);
  opacity: 0.9;
  pointer-events: none;
}

.franchise-card > * {
  position: relative;
  z-index: 1;
}

.franchise-card__title {
  margin: 0 0 8px;
  font-size: 1.15rem;
  color: #0f172a;
}

.franchise-card__body {
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.7;
}

/* ----- CARD SPLIT (2 COLUMNAS) ----- */

.franchise-card--split .franchise-card__body {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.1fr);
  gap: 24px;
  align-items: flex-start;
}

/* ----- LISTAS GENERALES ----- */

.franchise-list {
  margin: 8px 0 8px 0;
  padding-left: 18px;
}

.franchise-list li {
  margin-bottom: 4px;
}

/* versión compacta para el CTA */

.franchise-list--compact {
  margin-top: 6px;
}

/* ----- MÉTRICAS ----- */

.franchise-metrics {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.franchise-metric {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(249, 250, 251, 0.9);
  border: 1px solid rgba(209, 213, 219, 0.9);
}

.franchise-metric__label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6b7280;
  margin-bottom: 2px;
}

.franchise-metric__value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #111827;
}

/* ----- ASIDE PERFIL ----- */

.franchise-aside {
  border-radius: 14px;
  padding: 14px 14px 12px;
  background: rgba(30, 64, 175, 0.04);
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.franchise-aside__title {
  margin: 0 0 6px;
  font-size: 0.98rem;
  color: #1d4ed8;
}

.franchise-aside__list {
  margin: 4px 0 6px;
  padding-left: 18px;
  font-size: 0.88rem;
}

.franchise-aside__list li {
  margin-bottom: 3px;
}

.franchise-aside__note {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: #4b5563;
}

/* ----- PASOS (OL) ----- */

.franchise-steps {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  counter-reset: franchise-step;
}

.franchise-steps li {
  position: relative;
  padding-left: 38px;
  margin-bottom: 12px;
  counter-increment: franchise-step;
}

.franchise-steps li::before {
  content: counter(franchise-step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  background: linear-gradient(135deg, #f97316, #fb923c);
  color: #f9fafb;
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.45);
}

.franchise-step__title {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  color: #111827;
}

.franchise-step__text {
  margin: 2px 0 0;
  font-size: 0.88rem;
  color: #4b5563;
}

/* ----- CTA FINAL ----- */

.franchise-card--cta {
  border-color: rgba(22, 163, 74, 0.6);
}

.franchise-card--cta::before {
  background: radial-gradient(circle at top left, rgba(34, 197, 94, 0.18), transparent 55%);
}

.franchise-card__body--cta {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 24px;
  align-items: center;
}

.franchise-cta-panel {
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(22, 163, 74, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.55);
}

.franchise-cta-panel__text {
  margin: 0 0 8px;
  font-size: 0.88rem;
  color: #065f46;
}

/* Botón CTA */

.franchise-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #f9fafb;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(22, 163, 74, 0.4);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.16s ease, filter 0.12s ease;
  white-space: nowrap;
}

.franchise-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(22, 163, 74, 0.5);
  filter: brightness(1.03);
}

.franchise-btn:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.35);
}

/* ----- RESPONSIVE ----- */

@media (max-width: 900px) {
  .franchise-page {
    padding-top: 84px;
  }

  .franchise-card {
    padding: 20px 16px 22px;
  }

  .franchise-card--split .franchise-card__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .franchise-card__body--cta {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .franchise-page {
    padding: 80px 12px 64px;
  }

  .franchise-shell {
    max-width: 100%;
  }

  .franchise-sub {
    max-width: none;
  }

  .franchise-steps li {
    padding-left: 34px;
  }
}