/* ==========================================================================
   Mariscos El Torito · Mazatlán
   Se carga DESPUÉS de styles.css, que es EL MISMO sistema de diseño del sitio de Cabos (no se toca): letras Barlow Condensed, Zilla Slab
   y Kaushan Script; madera azul marino con cuerda y latón; placa del logo; paneles de cuero; la carta como el menú impreso (madera blanca,
   marco azul, títulos en script azul). La carta de cada sucursal usa el diseño de la de Cabos. Aquí solo van las piezas que Cabos no tiene
   porque Mazatlán son 3 sucursales con 2 menús: los botones para elegir sucursal, el selector de arriba, "para recoger / a domicilio",
   las pestañas de "Visítanos", el resumen de reseñas, la lista de teléfonos y los ajustes para que en el celular todo sea corto y claro.
   Nada de recortes pegados ni filtros SVG sobre HTML (se veían mal en iPhone): todo es CSS limpio.
   ========================================================================== */

:root{
  --wa:#188646;--wa-osc:#116b37;                /* verde de WhatsApp (con texto blanco cumple el contraste) */
  --marino-rgb:15,26,48;
  --sombra-1:0 1px 2px rgba(35,31,26,.08),0 8px 20px rgba(35,31,26,.08);
  --sombra-2:0 2px 4px rgba(35,31,26,.10),0 16px 34px rgba(35,31,26,.16);
  /* color de la sucursal que corresponda (el inicio usa el terracota de la marca) */
  --ac:#a9502e;--ac-osc:#8a3f22;--ac-txt:#8a3f22;--ac-luz:#e6a26f;--ac-rgb:169,80,46;--ac-hero:15,26,48;--ac-on:#fff}

/* ---------- Color de cada sucursal: los tres salen del logo (azul de mar, naranja de "ISCOS" y rojo del camarón y la cuerda) ----------
   Cualquier elemento con data-suc="…" toma sus colores: --ac (principal, con texto blanco encima), --ac-osc (al pasar el cursor), --ac-txt (texto sobre papel),
   --ac-luz (sobre fondos oscuros) y --ac-hero (tinte de la portada). Todas las combinaciones cumplen el contraste AA. */
/* Colores tomados de los círculos de Facebook de cada sucursal (7-nov-2026): La Marina amarillo #f0d069 · Rafael Buelna naranja #eb6a28 · Rotarismo azul #5282b2.
   --ac-on = color del texto sobre --ac (en amarillo y naranja va oscuro para que se lea; el azul se oscureció un poco para llevar texto blanco) */
[data-suc="la-marina"]{--ac:#f0d069;--ac-osc:#d9b44a;--ac-txt:#7a5d0a;--ac-luz:#f0d069;--ac-rgb:240,208,105;--ac-hero:58,46,8;--ac-on:#1b2a41}
[data-suc="rafael-buelna"]{--ac:#eb6a28;--ac-osc:#c9531a;--ac-txt:#a8430f;--ac-luz:#f58a50;--ac-rgb:235,106,40;--ac-hero:56,22,6;--ac-on:#2a1206}
[data-suc="rotarismo"]{--ac:#4a78a9;--ac-osc:#365c86;--ac-txt:#2f5a8a;--ac-luz:#8bb3d7;--ac-rgb:74,120,169;--ac-hero:14,30,52;--ac-on:#fff}
/* los colores de cada sucursal (--ac…) son solo un detalle (selector, botones de elegir, "Visítanos", opiniones); la carta y el pedido llevan el azul y el terracota de la marca, igual que en Cabos */

/* ---------- Base ---------- */
body[data-pagina="suc"]{background:#f1efec url("assets/madera-blanca.svg")}
body[data-pagina="suc"] .site-header{position:relative}
body[data-pagina="suc"] .sf-fin,body[data-pagina="home"] .sf-fin{padding-bottom:96px}
.btn-wa,.btn.btn-wa{background:var(--wa);border-color:var(--wa);color:#fff}
.btn-wa:hover,.btn.btn-wa:hover{background:var(--wa-osc);border-color:var(--wa-osc)}
.seccion{padding:52px 16px}
.titulo-sec{margin-bottom:26px}
.titulo-sec p{font-size:19px;line-height:1.3}
@media(min-width:700px){.seccion{padding:64px 20px}.titulo-sec{margin-bottom:34px}.titulo-sec p{font-size:20px}}
@media(min-width:800px){.sf-in{grid-template-columns:1.1fr 1fr 1fr 1fr}}
.sf-redes{margin-top:10px}
.sf-redes a{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:18px}
/* Pie: más corto en el celular (tres sucursales con dirección, horario y teléfono sin mucho aire) */
.sf-in{gap:20px;padding:36px 20px 20px}
.sf-col h2{margin-bottom:6px}
.sf-col p{margin-bottom:3px;font-size:18px;line-height:1.25}
.sf-col a{min-height:36px}
.sf-lema{margin-top:10px;font-size:18px;line-height:1.25;color:#cfc6b2}
.sf-hor{font-size:17px;color:#bdb3a0}
.sf-col+.sf-col{padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
@media(min-width:800px){.sf-in{gap:36px;padding:54px 24px 34px}.sf-col p{font-size:19px;margin-bottom:6px}.sf-col+.sf-col{padding-top:0;border-top:0}}

/* Navegación: un puntito del color de cada sucursal antes de su nombre */
.sh-nav a[data-suc]{display:flex;align-items:center;gap:10px}
.sh-nav a[data-suc]::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--ac-luz)}
@media(min-width:900px){.sh-nav a[data-suc]{gap:8px}}

/* Navegación: 5 enlaces caben también en pantallas medianas */
@media(min-width:900px) and (max-width:1099px){.sh-nav a{font-size:15px;letter-spacing:.08em}.sh-nav>a{padding:10px 8px}.sh-cta{padding:8px 12px}}

/* ---------- Inicio: portada y datos rápidos (más cortos en el celular) ---------- */
.hero .foto{aspect-ratio:3/2}
.hero-in{margin-top:-160px;padding-top:58px;padding-bottom:40px}
.placa{margin-bottom:18px}
.hero-lema{margin:-4px 0 18px;font-family:var(--script);font-size:clamp(24px,6vw,32px);line-height:1.2;color:#ecdfc3}
.hero-cta .btn{flex:1 1 150px;padding:12px 14px}
.hero-nota{margin-top:16px;font-size:17px;line-height:1.25}
@media(min-width:700px){.hero .foto{aspect-ratio:4/3}.hero-in{margin-top:-190px;padding-top:70px;padding-bottom:56px}.placa{margin-bottom:24px}.hero-cta .btn{flex:1 1 180px;padding:12px 26px}.hero-nota{font-size:18px}}
@media(max-width:759px){
  .strip-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .strip-item{flex-direction:column;justify-content:flex-start;gap:6px;min-height:0;padding:14px 6px 12px;border-top:0;border-left:1px solid var(--linea);text-align:center}
  .strip-item:first-child{border-left:0}
  .strip-ic{flex:0 0 38px;width:38px;height:38px}
  .strip-k{font-size:12px;letter-spacing:.14em}
  .strip-v{font-size:17px}
}

/* ---------- Inicio: tarjetas de sucursal (foto arriba, panel de cuero abajo, como la carta de Cabos) ---------- */
.suc-lista{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);max-width:1100px;margin:0 auto}
@media(min-width:900px){.suc-lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}}

.suc-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:8px;background:var(--cuero) url("assets/cuero.svg") center/cover;color:#f4e9d6;box-shadow:0 0 0 2px var(--cal),0 0 0 4px var(--brass),var(--sombra-2);transition:transform .25s,box-shadow .25s}
.suc-card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;z-index:2;background:var(--ac)}   /* franja del color de la sucursal */
.suc-card:hover{transform:translateY(-3px)}
.suc-card-int{display:flex;flex-direction:column;flex:1}
.suc-card-foto{position:relative;display:block;overflow:hidden;background:var(--marino)}
.suc-card-foto img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 40%;transition:transform .6s}
.suc-card:hover .suc-card-foto img{transform:scale(1.04)}
.menu-chip{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px;padding:3px 12px 3px 9px;border-radius:2px;background:var(--ac);color:var(--ac-on);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.menu-chip .ic{width:16px;height:16px;stroke-width:2}
/* panel de cuero con costura y remaches de latón en las cuatro esquinas (el rústico de rancho de la marca) */
.suc-card-in{position:relative;display:flex;flex-direction:column;flex:1;margin:10px;padding:14px 14px 12px;border:2px dashed rgba(244,233,214,.5);border-radius:5px;
  background:
  radial-gradient(circle,#f0d795 0 1.3px,#a07a2e 2px,#6a4e1a 3px,transparent 3.5px) left 5px top 5px/9px 9px no-repeat,
  radial-gradient(circle,#f0d795 0 1.3px,#a07a2e 2px,#6a4e1a 3px,transparent 3.5px) right 5px top 5px/9px 9px no-repeat,
  radial-gradient(circle,#f0d795 0 1.3px,#a07a2e 2px,#6a4e1a 3px,transparent 3.5px) left 5px bottom 5px/9px 9px no-repeat,
  radial-gradient(circle,#f0d795 0 1.3px,#a07a2e 2px,#6a4e1a 3px,transparent 3.5px) right 5px bottom 5px/9px 9px no-repeat}
/* sello redondo con el ícono de la sucursal (ancla, sol o rueda de carreta), en su color */
.suc-sello{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:var(--ac);color:var(--ac-on);box-shadow:0 0 0 2px #f4e9d6,0 0 0 4px var(--brass),0 6px 14px rgba(0,0,0,.4)}
.suc-sello .ic{width:27px;height:27px;stroke-width:1.9}
.suc-card .suc-sello{position:absolute;top:-34px;right:16px;z-index:3}
.suc-card h3{padding-right:58px;font-family:var(--serif);font-weight:700;font-size:30px;line-height:1.1;color:#fff}
.suc-card h3 a:hover{text-decoration:underline;text-underline-offset:5px}
.suc-card .dist{margin-top:2px;font-family:var(--script);font-size:22px;line-height:1.25;color:var(--ac-luz)}
.suc-card .dir{margin-top:4px;font-size:20px;font-weight:600;line-height:1.2;color:#f4e9d6}
.suc-card .estado{margin-top:8px;font-size:18px;color:#fff}
.servicios{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.servicios li{display:inline-flex;align-items:center;gap:6px;padding:2px 11px 2px 8px;border:1px solid rgba(244,233,214,.45);border-radius:999px;font-size:16px;font-weight:600;letter-spacing:.03em;color:#f4e9d6}
.servicios .ic{width:16px;height:16px;color:var(--ac-luz)}
.suc-card .acc{display:grid;gap:2px;margin-top:auto;padding-top:16px}
.suc-card .acc .btn{width:100%}
.suc-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-weight:600;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:#f4e9d6}
.suc-link .ic{width:18px;height:18px;color:var(--brass)}
.suc-link:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
/* tabletas: tarjetas horizontales (foto a la izquierda) para no hacer fotos enormes ni tres columnas muy angostas */
@media(min-width:640px) and (max-width:899px){
  .suc-lista{max-width:720px}
  .suc-card-int{flex-direction:row}
  .suc-card-foto{flex:0 0 40%}
  .suc-card-foto img{height:100%;aspect-ratio:auto}
}

/* ---------- Inicio: cómo pedir (3 pasos cortos en el celular) ---------- */
.pasos-ped{gap:12px;margin:28px auto 20px}
.pasos-ped li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:center;text-align:left;padding:14px 16px}
.pasos-ped .num{position:static;transform:none;grid-row:1 / span 2;width:42px;height:42px;font-size:22px}
.pasos-ped h3{font-size:21px;line-height:1.15}
.pasos-ped p{margin-top:2px;font-size:18px;line-height:1.25}
@media(min-width:800px){
  .pasos-ped{gap:28px;margin:42px auto 28px}
  .pasos-ped li{display:block;text-align:center;padding:30px 20px 24px}
  .pasos-ped .num{position:absolute;left:50%;top:-21px;transform:translateX(-50%)}
  .pasos-ped h3{font-size:22px}.pasos-ped p{margin-top:6px;font-size:19px}
}
.pedir-nota{max-width:620px;margin:0 auto 22px;text-align:center;font-size:18px;line-height:1.3;color:var(--suave)}

/* ---------- Visítanos: una pestaña por sucursal ---------- */
.visita-tabs{display:flex;gap:6px;max-width:560px;margin:0 auto 14px;padding:4px;border-radius:8px;background:rgba(20,35,63,.09)}
.visita-tabs button{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:5px 8px;border:0;border-radius:5px;background:transparent;color:var(--navy);font:inherit;font-size:16px;font-weight:600;letter-spacing:.06em;line-height:1.05;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s}
.visita-tabs button:hover{background:rgba(20,35,63,.12)}
.visita-tabs button[aria-selected="true"]{background:var(--ac);color:var(--ac-on);box-shadow:0 2px 6px rgba(10,15,30,.3)}
/* en el celular un puntito del color de cada sucursal; con más ancho, su ícono */
.visita-tabs button::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--ac)}
.visita-tabs button[aria-selected="true"]::before{background:#fff}
.visita-tabs button .ic{display:none;width:19px;height:19px;color:var(--ac)}
.visita-tabs button[aria-selected="true"] .ic{color:var(--ac-on)}
@media(min-width:560px){.visita-tabs button::before{display:none}.visita-tabs button .ic{display:block}}
.visita-in{max-width:1000px;margin:0 auto}
.visita-in[data-suc]{--terra:var(--ac);--terra-osc:var(--ac-osc);border-top:6px solid var(--ac)}
.visita-in:focus-visible{outline-offset:4px}
.info{padding:26px 20px 6px}
.fila{margin-bottom:16px}
.fila p{font-size:20px}
.tel-fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin:0 0 8px}
.tel-id small{display:block;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--suave)}
.tel-num{display:inline-flex;align-items:center;min-height:40px;font-size:23px;font-weight:600;letter-spacing:.03em;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.tel-num:hover{text-decoration:underline;text-underline-offset:4px}
.wa-mini{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:42px;padding:0 13px 0 11px;border-radius:2px;background:var(--wa);color:#fff;font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;transition:background .2s}
.wa-mini:hover{background:var(--wa-osc)}
.wa-mini .ic{width:19px;height:19px}
.refs-det{flex:1;min-width:0}
.refs-det summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;list-style:none;cursor:pointer}
.refs-det summary::-webkit-details-marker{display:none}
.refs-det summary h3{margin-bottom:0}
.refs-det summary::after{content:"";flex:none;width:9px;height:9px;margin:-4px 4px 0 0;border-right:2px solid var(--terra-osc);border-bottom:2px solid var(--terra-osc);transform:rotate(45deg);transition:transform .2s}
.refs-det[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.refs-det .refs{margin-top:6px}
@media(min-width:800px){.refs-det summary{pointer-events:none;cursor:default}.refs-det summary::after{display:none}.info{padding:34px 30px 10px}.fila{margin-bottom:20px}}
.mapa{min-height:250px}
@media(min-width:800px){.mapa{min-height:380px}}
.mapa-ph{padding:16px}
.mapa-ph b{font-size:21px}
.acciones{padding:10px 20px 24px}

/* ---------- Reseñas de Google: resumen y enlaces (no se copian textos de reseñas) ---------- */
.resenas{padding:52px 16px 48px}
.res-body.res-solo{grid-template-columns:minmax(0,1fr);gap:22px;max-width:760px;margin:0 auto}
@media(min-width:900px){.res-body.res-solo{grid-template-columns:minmax(230px,.8fr) 1.5fr;max-width:none;align-items:center}}
.res-resumen .num{font-size:72px}
.res-resumen .res-fecha{margin-bottom:2px}
.res-resumen .res-fecha:last-child{margin-bottom:0}
.res-card{background:var(--papel);color:var(--tinta);padding:24px 20px 22px;box-shadow:inset 0 0 0 5px var(--papel),inset 0 0 0 6px rgba(201,160,80,.8),0 12px 30px rgba(0,0,0,.3)}
.res-sub{margin:0 0 6px;padding:0 6px;font-size:14px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--terra-osc)}
.res-sub:not(:first-child){margin-top:22px}
.res-lista a{display:flex;align-items:center;gap:10px;min-height:54px;padding:8px 6px;border-top:1px solid var(--linea);transition:background .15s}
.res-lista li:last-child a{border-bottom:1px solid var(--linea)}
.res-lista a:hover{background:#fff}
.rs-n{flex:1;min-width:0;font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.1;color:var(--navy)}
.rs-v{flex:none;font-size:19px;font-weight:600;color:var(--tinta);white-space:nowrap;font-variant-numeric:tabular-nums}
.rs-e{color:var(--brass-txt)}
.rs-dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--ac)}
.rs-ir{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-osc)}
.rs-ir .ic{width:18px;height:18px}
.rs-t{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(min-width:520px){.rs-t{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}}
.res-temas{display:flex;flex-wrap:wrap;gap:6px;padding:0 6px}
.res-temas li{padding:2px 12px;border:1px solid var(--linea);border-radius:999px;background:#fff;font-size:17px;font-weight:600;color:var(--navy)}
.res-escribe{margin-top:22px;padding:14px 6px 0;border-top:1px solid var(--linea);font-size:18px;line-height:1.25;color:var(--suave)}
.res-escribe-l{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.res-escribe-l a{display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border:1.5px solid var(--navy);border-radius:2px;font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);transition:background .15s,color .15s}
.res-escribe-l a:hover{background:var(--navy);color:#fff}

/* ---------- Historia: la introducción siempre a la vista y el resto plegado en el celular ---------- */
.historia{padding:50px 16px 56px}
.hist-body{grid-template-areas:"intro" "mas";gap:20px}
.hist-mas{grid-area:mas}
.hist-mas>summary{display:flex;align-items:center;justify-content:center;gap:8px;max-width:260px;min-height:46px;margin:0 auto;border:1.5px solid var(--navy);border-radius:2px;background:transparent;color:var(--navy);font-size:16px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;list-style:none;cursor:pointer;transition:background .15s,color .15s}
.hist-mas>summary::-webkit-details-marker{display:none}
.hist-mas>summary:hover{background:var(--navy);color:#fff}
.hist-mas>summary .ic{width:18px;height:18px;transform:rotate(90deg);transition:transform .2s}
.hist-mas[open]>summary .ic{transform:rotate(-90deg)}
.hist-mas>summary .s-cerrar{display:none}
.hist-mas[open]>summary .s-abrir{display:none}
.hist-mas[open]>summary .s-cerrar{display:inline}
.hist-mas>.hist-linea{margin-top:28px}
.hist-mas>.hist-sopa{margin-top:30px}
.hist-anio{font-size:28px}
.hist-txt h3{font-size:21px}
.hist-txt p{font-size:19px;line-height:1.35}
.hist-sopa p{font-size:19px}
.sopa-ir{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;margin-top:12px}
.sopa-ir span{font-size:14px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--suave)}
.sopa-ir a{display:inline-flex;align-items:center;min-height:36px;border-bottom:1.5px solid var(--brass);font-size:19px;font-weight:600;color:var(--navy)}
.sopa-ir a:hover{color:var(--terra)}
.hist-cierre{margin-top:36px;font-size:clamp(21px,4.8vw,26px)}
.hist-firma{max-width:640px;margin:10px auto 0;text-align:center;font-family:var(--script);font-size:clamp(24px,6vw,32px);line-height:1.25;color:var(--azul)}
@media(min-width:800px){
  .hist-mas>summary{display:none}
  .hist-mas>.hist-linea{margin-top:0}
}
@media(min-width:900px){
  .historia{padding:72px 24px 80px}
  .hist-body{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"intro mas";grid-template-rows:auto;column-gap:60px}
  .hist-intro{position:sticky;top:90px}
}

/* ---------- Elegir sucursal: los tres botones del inicio y de la página /menu (cada uno lleva a la carta de su sucursal) ---------- */
.elegir-t{margin:0 0 12px;font-weight:600;font-size:15px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass)}
.elegir-lista{display:grid;gap:12px;max-width:520px;margin:0 auto;text-align:left}
.elegir-btn{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;min-height:76px;padding:10px 14px 10px 22px;border-radius:8px;background:var(--cuero) url("assets/cuero.svg") center/cover;color:#f4e9d6;box-shadow:0 0 0 2px var(--cal),0 0 0 4px var(--brass),var(--sombra-2);overflow:hidden;transition:transform .2s}
.elegir-btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--ac)}   /* franja del color de la sucursal */
.elegir-btn:hover{transform:translateY(-2px)}
.elegir-btn .suc-sello{flex:none;width:46px;height:46px;box-shadow:0 0 0 2px #f4e9d6,0 0 0 3px var(--brass)}
.elegir-btn .suc-sello .ic{width:25px;height:25px}
.elegir-cuerpo{flex:1;min-width:0}
.elegir-n{display:block;font-family:var(--serif);font-weight:700;font-size:27px;line-height:1.1;color:#fff}
.elegir-d{display:block;margin-top:1px;font-family:var(--script);font-size:19px;line-height:1.25;color:var(--ac-luz)}
.elegir-dir{display:block;margin-top:2px;font-size:17px;line-height:1.2;color:#f4e9d6}
.elegir-meta{flex:0 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px;margin-top:8px;padding-top:7px;border-top:1px solid rgba(244,233,214,.24);font-size:16px;font-weight:600;line-height:1.2;color:#f4e9d6}
.elegir-meta .estado{color:#fff}
.elegir-meta .ic{width:17px;height:17px;margin-right:5px;color:var(--ac-luz);vertical-align:-3px}
.elegir-ir{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(244,233,214,.14);color:var(--brass)}
.elegir-ir .ic{width:22px;height:22px}
/* versión corta (portada del inicio): solo nombre y dirección */
.elegir-chico .elegir-btn{min-height:68px;padding-top:9px;padding-bottom:9px}
.elegir-chico .elegir-d,.elegir-chico .elegir-meta{display:none}
.elegir-chico .elegir-n{font-size:25px}
/* celulares muy angostos (320 px): botones un poco más compactos */
@media(max-width:360px){
  .elegir-btn{padding-left:18px;gap:0 10px}
  .elegir-btn .suc-sello{width:40px;height:40px}
  .elegir-btn .suc-sello .ic{width:22px;height:22px}
  .elegir-n{font-size:23px}
  .elegir-d{font-size:17px}
  .elegir-dir{font-size:15px}
  .elegir-ir{width:30px;height:30px}
  .elegir-ir .ic{width:18px;height:18px}
}
/* portada del inicio: más corta para que los tres botones se vean sin bajar */
.hero-elegir .foto{aspect-ratio:2.2/1}
.hero-elegir .hero-in{margin-top:-96px;padding-top:30px;padding-bottom:34px}
.hero-elegir .placa{margin-bottom:12px}
.hero-elegir .placa .logo{width:min(168px,44vw)}
.hero-elegir .hero-lema{margin:0 0 16px;font-size:clamp(22px,5.6vw,28px)}
.hero-elegir .hero-nota{margin-top:16px}
@media(min-width:700px){.hero-elegir .foto{aspect-ratio:3.6/1}.hero-elegir .hero-in{margin-top:-100px;padding-top:32px}.hero-elegir .placa .logo{width:190px}}
@media(min-width:900px){
  .hero-elegir .foto{aspect-ratio:4.2/1}
  .hero-elegir .hero-in{padding-left:max(22px,calc((100% - 980px) / 2));padding-right:max(22px,calc((100% - 980px) / 2))}
  .hero-elegir .elegir-lista{grid-template-columns:repeat(3,minmax(0,1fr));max-width:980px}
  .hero-elegir .elegir-ir{display:none}
}
/* página /menu: el enlace para compartir (Instagram, Google, QR) abre directo aquí */
body[data-pagina="elegir"]{background:#f1efec url("assets/madera-blanca.svg")}
body[data-pagina="elegir"] .site-header{position:relative}
body[data-pagina="elegir"] .sf-fin{padding-bottom:96px}
.elegir-pag{max-width:640px;margin:0 auto;padding:20px 16px 40px;text-align:center}
.elegir-pag h1{font-family:var(--script);font-weight:400;color:var(--azul);font-size:clamp(38px,9.5vw,54px);line-height:1.1}
.elegir-sub{margin:4px auto 16px;font-size:19px;line-height:1.3;color:var(--suave)}
.elegir-nota{margin:22px auto 0;font-size:18px;line-height:1.3;color:var(--suave)}

/* ---------- La carta: es la de Cabos (styles.css, sin tocar). Aquí solo lo que Mazatlán necesita de más ---------- */
.carta-zona{position:relative}
/* sin marco alrededor de la carta (se quitó el 5-nov-2026 a petición del usuario) */
.marco::before{display:none}
/* platillo: igual que en Cabos (nombre ··· precio y botón +); la porción va chica junto al nombre y la descripción debajo */
.item .por{margin-left:8px;font-size:15px;font-weight:500;text-transform:none;letter-spacing:.03em;color:var(--suave);white-space:nowrap}
.item .p.p-txt{font-size:15px;letter-spacing:.06em}
.cat-sub{margin:-2px 0 8px;font-size:16px;font-weight:500;line-height:1.25;color:var(--suave)}
@media(max-width:360px){.menu-head{padding-left:50px;padding-right:50px}.menu-head h1{font-size:34px}}   /* el título no pasa por debajo del botón de compartir */

/* ---------- Selector de sucursal (arriba de cada carta): se ve dónde estás y se salta a otra con un toque ---------- */
.suc-switch{display:flex;justify-content:center;gap:6px;padding:6px 10px;background:var(--papel) url("assets/madera-blanca.svg");border-bottom:1px solid var(--linea);box-shadow:0 2px 8px rgba(35,31,26,.06)}
.suc-switch:empty{min-height:88px}
.suc-switch a{flex:1 1 0;max-width:240px;display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:4px 6px;border:1.5px solid var(--linea);border-radius:6px;background:#fff;color:var(--navy);font-size:15px;font-weight:600;letter-spacing:.05em;line-height:1.05;text-align:center;text-transform:uppercase;transition:background .15s,color .15s,border-color .15s}
.suc-switch a:hover{border-color:var(--ac);color:var(--ac-txt)}
.suc-switch .sw-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--ac)}
.suc-switch .ic{display:none;flex:none;width:20px;height:20px;color:var(--ac)}
.suc-switch a[aria-current="page"]{border-color:var(--ac);background:var(--ac);color:var(--ac-on);box-shadow:0 2px 6px rgba(var(--ac-rgb),.4)}
.suc-switch a[aria-current="page"] .sw-dot{background:#fff}
.suc-switch a[aria-current="page"] .ic{color:var(--ac-on)}
@media(min-width:560px){.suc-switch .sw-dot{display:none}.suc-switch .ic{display:block}.suc-switch a{font-size:16px}}
/* arriba de la carta, en palabras: en qué sucursal estás (y si es solo para recoger o también a domicilio) */
.suc-switch{flex-wrap:wrap}
.sw-aqui{flex:0 0 100%;margin:2px 0 0;padding:0 4px 2px;text-align:center;font-size:18px;line-height:1.2;color:var(--suave)}
.sw-aqui b{font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-txt)}

/* ---------- Opiniones de la sucursal: tarjeta con su color y lo que más mencionan en Google ---------- */
.suc-opin{padding-top:30px;padding-bottom:30px}
.opin-card{max-width:640px;margin:0 auto;padding:24px 20px 22px;background:var(--papel);border:1.5px solid var(--navy);border-top:6px solid var(--ac);box-shadow:inset 0 0 0 5px var(--papel),inset 0 0 0 6px var(--brass),var(--sombra-1);text-align:center}
.opin-card h2{font-family:var(--serif);font-weight:700;font-size:clamp(25px,6vw,32px);line-height:1.12;color:var(--navy)}
.opin-cab{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 4px}
.opin-num{font-family:var(--serif);font-weight:700;font-size:58px;line-height:1;color:var(--ac-txt)}
.opin-det{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.opin-det .res-estrellas{font-size:20px;color:var(--brass-txt)}
.opin-tot{font-size:19px;font-weight:600;color:var(--tinta);font-variant-numeric:tabular-nums}
.opin-sub{margin:16px 0 8px;font-size:14px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--ac-txt)}
.opin-card .res-temas{justify-content:center}
.opin-card .res-temas li{border-color:rgba(var(--ac-rgb),.35)}
.opin-acc{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.opin-acc .btn{flex:1 1 160px;max-width:230px}

/* ---------- Pie: un puntito del color de cada sucursal junto a su nombre ---------- */
.sf-col[data-suc] h2 a::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--ac-luz)}
/* ---------- Barra inferior: lista para elegir a quién llamar o escribir (solo cuando hay más de un número) ---------- */
.dock-btn.dock-wa{background:var(--wa)}
.dock-btn.dock-wa:hover{background:var(--wa-osc)}
@media(max-width:400px){.lang-switch a{min-width:66px;padding:0 10px;letter-spacing:.08em}}
@media(max-width:360px){.lang-switch a{min-width:58px;padding:0 8px}.dock-btn{width:40px;height:40px}}
.dock-pop{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);width:min(340px,calc(100vw - 24px));padding:8px;background:var(--papel);color:var(--tinta);border:1.5px solid var(--navy);border-radius:6px;box-shadow:0 14px 34px rgba(10,15,30,.4);animation:pop-in .16s ease-out both}
@keyframes pop-in{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.pop-t{padding:6px 8px 8px;font-weight:700;font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--navy)}
.pop-fila{display:flex;align-items:center;gap:8px;min-height:58px;padding:8px 10px;border-top:1px solid var(--linea);border-radius:3px;color:var(--navy)}
.pop-fila:hover{background:#fff}
.pop-fila .ic{width:22px;height:22px;flex:none;margin-left:auto;color:var(--navy)}
.dock-pop-wa .pop-fila .ic{color:var(--wa)}
.pop-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.pop-n{font-weight:600;font-size:20px;line-height:1.2}
.pop-num{font-weight:600;font-size:18px;letter-spacing:.05em;color:var(--suave)}
.dock-pop :focus-visible{outline-color:var(--azul)}
@media(prefers-reduced-motion:reduce){.dock-pop{animation:none}}

/* ---------- Hoja "Mi pedido": selector de zona (Rotarismo) y envío por WhatsApp ---------- */
.ph-uno .ph-enviar.ph-rec{background:var(--wa);color:#fff;box-shadow:0 4px 0 var(--wa-osc)}
.ph-datos .ph-zonas{margin:12px 0 0;border:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ph-zonas legend{grid-column:1/-1;padding:0;margin-bottom:2px;font-weight:700;font-size:19px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.ph-datos .ph-zona{position:relative;display:block;margin:0;padding:0}
.ph-zona input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ph-zona span{display:flex;align-items:center;justify-content:center;min-height:54px;padding:6px 10px;border:2px solid var(--navy);border-radius:3px;background:#fff;color:var(--navy);font-weight:700;font-size:20px;letter-spacing:.12em;text-transform:uppercase;text-align:center;transition:background .15s,color .15s}
.ph-zona input:checked+span{background:var(--azul);border-color:var(--azul);color:#fff}
.ph-zona input:focus-visible+span{outline:3px solid var(--azul);outline-offset:2px}

/* ---------- Movimiento reducido ---------- */
@media(prefers-reduced-motion:reduce){.suc-card,.suc-card-foto img,.elegir-btn,.btn,.refs-det summary::after,.hist-mas>summary .ic{transition:none}.suc-card:hover,.elegir-btn:hover{transform:none}}

/* ---------- Impresión del menú: solo la carta (el resto lo resuelve styles.css, igual que en Cabos) ---------- */
@media print{
  .suc-switch,.elegir-pag{display:none!important}
  .item .p{color:#000}
}