/* Sabores Criollos · sistema del sitio (todas las páginas menos la carta, que tiene el suyo).
   Concepto: "un restaurante familiar, familiar" (don Jaime, 29-oct-2026). El álbum de fotos
   familiar (polaroids con letra a mano) es el recurso que lo cuenta. */
:root {
  --rojo:#e0263a; --rojo-osc:#b81d30; --azul:#2b3990; --azul-osc:#1f2a6e; --crema:#fbf6ee; --papel:#fffdf8; --arena:#f3ebdd;
  --tinta:#1d1b22; --gris:#5f5b67; --oro:#f2b01e; --verde:#1fae54; --verde-osc:#178f44;
  --sombra:0 24px 60px -26px rgba(60,30,20,.42); --ease:cubic-bezier(.22,1,.36,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { font-family:"Outfit",system-ui,sans-serif; color:var(--tinta); background:var(--crema); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
:focus-visible { outline:3px solid var(--oro); outline-offset:3px; border-radius:12px; }
.contenedor { width:min(1180px, 100% - 32px); margin:0 auto; }
.titulo { font-family:"DM Serif Display",Georgia,serif; font-weight:400; line-height:1.02; letter-spacing:-.01em; }
.titulo em { font-style:italic; color:var(--rojo); }
.mano { font-family:"Caveat",cursive; font-weight:600; }
.ceja { display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--rojo); }
.ceja::before { content:""; width:22px; height:3px; border-radius:3px; background:currentColor; }
.manta { height:10px; background:url(manta.png) repeat-x 0 0 / auto 10px; }
.lead { font-size:18px; line-height:1.6; color:var(--gris); }

/* Botones */
.boton { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 26px; border-radius:999px; font-weight:700; font-size:16.5px; white-space:nowrap; transition:transform .18s var(--ease), box-shadow .2s, background-color .2s, color .2s; }
.boton:hover { transform:translateY(-2px); }
.boton:active { transform:translateY(0) scale(.97); }
.boton svg { width:20px; height:20px; flex:none; }
.boton.rojo { background:var(--rojo); color:#fff; box-shadow:0 14px 30px -12px rgba(224,38,58,.75); }
.boton.rojo:hover { background:var(--rojo-osc); }
.boton.wsp { background:var(--verde); color:#fff; box-shadow:0 14px 30px -12px rgba(31,174,84,.75); }
.boton.wsp:hover { background:var(--verde-osc); }
.boton.claro { background:#fff; color:var(--azul-osc); box-shadow:0 10px 26px -14px rgba(31,42,110,.5); }
.boton.claro:hover { background:#f2f4ff; }
.boton.azul { background:var(--azul); color:#fff; box-shadow:0 14px 30px -12px rgba(43,57,144,.8); }
.boton.azul:hover { background:var(--azul-osc); }
.enlace { display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--azul); transition:gap .2s var(--ease), color .2s; }
.enlace:hover { gap:12px; color:var(--rojo); }

/* Cabecera y menú */
.cabecera { position:sticky; top:0; z-index:50; background:rgba(251,246,238,.9); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); transition:box-shadow .3s; }
.cabecera.sombra { box-shadow:0 10px 30px -18px rgba(60,30,20,.45); }
.cabecera .contenedor { display:flex; align-items:center; justify-content:space-between; height:72px; gap:16px; }
.marca { display:flex; align-items:center; gap:11px; }
.marca img { width:48px; height:48px; }
.marca b { font-family:"DM Serif Display",serif; font-weight:400; font-size:21px; line-height:1; }
.marca small { display:block; margin-top:4px; font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); }
.menu { display:none; gap:26px; font-weight:600; font-size:15.5px; }
.menu a { position:relative; padding:6px 0; transition:color .2s; }
.menu a::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--rojo); transition:right .25s var(--ease); }
.menu a:hover, .menu a[aria-current="page"] { color:var(--rojo); }
.menu a:hover::after, .menu a[aria-current="page"]::after { right:0; }
.cabecera .acciones-cab { display:flex; align-items:center; gap:8px; }
.cabecera .boton { height:44px; padding:0 18px; font-size:15px; }
.hamburguesa { width:46px; height:46px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 8px 20px -12px rgba(60,30,20,.5); transition:transform .15s; }
.hamburguesa:active { transform:scale(.92); }
.hamburguesa span { display:block; width:20px; height:2px; background:var(--tinta); border-radius:2px; position:relative; transition:background .2s; }
.hamburguesa span::before, .hamburguesa span::after { content:""; position:absolute; left:0; width:20px; height:2px; background:var(--tinta); border-radius:2px; transition:transform .3s var(--ease); }
.hamburguesa span::before { top:-6px; } .hamburguesa span::after { top:6px; }
.menu-abierto .hamburguesa span { background:transparent; }
.menu-abierto .hamburguesa span::before { transform:translateY(6px) rotate(45deg); }
.menu-abierto .hamburguesa span::after { transform:translateY(-6px) rotate(-45deg); }
.hoja-menu { position:fixed; inset:0; z-index:45; background:var(--azul-osc); color:#fff; padding:100px 24px 30px; display:flex; flex-direction:column; opacity:0; pointer-events:none; transform:translateY(-12px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.menu-abierto .hoja-menu { opacity:1; pointer-events:auto; transform:none; }
.menu-abierto .cabecera { background:var(--crema); }
.hoja-menu nav { display:grid; gap:4px; }
.hoja-menu nav a { font-family:"DM Serif Display",serif; font-size:40px; line-height:1.25; padding:4px 0; transition:color .2s, padding-left .25s var(--ease); }
.hoja-menu nav a:hover, .hoja-menu nav a[aria-current="page"] { color:#ffd46b; padding-left:8px; }
.hoja-menu .pie-menu { margin-top:auto; display:grid; gap:12px; }
.hoja-menu .pie-menu small { color:rgba(255,255,255,.7); font-size:15px; line-height:1.5; }
.hoja-menu .manta { position:absolute; left:0; right:0; bottom:0; }

/* Portada de inicio: álbum familiar */
.portada { padding:22px 0 10px; position:relative; overflow-x:clip; }
.portada .contenedor { display:grid; gap:10px; }
.portada h1 { font-size:clamp(50px,14vw,100px); margin-top:14px; }
.portada .lead { margin-top:16px; max-width:40ch; }
.portada .acciones { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.album { position:relative; height:420px; margin-top:6px; }
.polaroid { position:absolute; background:#fff; padding:10px 10px 46px; border-radius:6px; box-shadow:0 30px 50px -24px rgba(40,20,10,.55), 0 2px 6px rgba(40,20,10,.12); transition:transform .5s var(--ease), box-shadow .3s; }
.polaroid img { width:100%; height:100%; object-fit:cover; border-radius:2px; }
.polaroid figcaption { position:absolute; left:10px; right:10px; bottom:8px; text-align:center; font-family:"Caveat",cursive; font-weight:600; font-size:24px; color:var(--tinta); line-height:1.1; }
.polaroid:hover { transform:rotate(0deg) scale(1.03) !important; z-index:5; }
.album .p1 { width:62%; height:300px; left:0; top:20px; transform:rotate(-5deg); z-index:2; }
.album .p2 { width:52%; height:250px; right:0; top:0; transform:rotate(6deg); z-index:1; }
.album .p3 { width:46%; height:220px; right:2%; top:190px; transform:rotate(-2deg); z-index:3; }
.cinta { position:absolute; width:90px; height:26px; background:rgba(242,176,30,.55); top:-12px; left:50%; transform:translateX(-50%) rotate(-3deg); }
.datos-rapidos { display:flex; gap:10px; overflow-x:auto; padding:18px 0 4px; scrollbar-width:none; }
.datos-rapidos::-webkit-scrollbar { display:none; }
.chip { flex:none; display:inline-flex; align-items:center; gap:8px; background:#fff; border-radius:999px; padding:10px 15px; font-weight:600; font-size:14.5px; box-shadow:0 8px 20px -14px rgba(60,30,20,.5); }
.chip .estrella { color:var(--oro); }
.chip .punto { width:8px; height:8px; border-radius:50%; background:var(--verde); box-shadow:0 0 0 4px rgba(31,174,84,.18); }
.chip.cerrado .punto { background:#a39b90; box-shadow:none; }

/* Cinta con platos que corre */
.corre { background:var(--azul); color:#fff; overflow:hidden; position:relative; padding:18px 0; margin-top:40px; }
.corre::before, .corre::after { content:""; position:absolute; left:0; right:0; height:6px; background:url(manta.png) repeat-x 0 0 / auto 6px; }
.corre::before { top:0; } .corre::after { bottom:0; }
.corre .pista { display:flex; gap:34px; width:max-content; animation:corre 38s linear infinite; font-family:"DM Serif Display",serif; font-size:30px; white-space:nowrap; }
.corre .pista span { display:inline-flex; align-items:center; gap:34px; }
.corre .pista span::after { content:"✦"; color:#ffd46b; font-size:18px; }
@keyframes corre { to { transform:translateX(-50%); } }

/* Bloques */
.bloque { padding:64px 0; }
.bloque.papel { background:var(--papel); }
.encabezado { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:16px; margin-bottom:28px; }
.encabezado h2 { font-size:clamp(38px,9vw,60px); margin-top:12px; }
.encabezado p { max-width:440px; font-size:17px; line-height:1.55; color:var(--gris); }

/* Para toda la familia */
.familia { display:grid; gap:14px; }
.tarjeta-fam { position:relative; display:grid; grid-template-columns:42% 1fr; background:#fff; border-radius:24px; overflow:hidden; box-shadow:var(--sombra); transition:transform .3s var(--ease), box-shadow .3s; }
.tarjeta-fam:hover { transform:translateY(-4px); box-shadow:0 30px 70px -26px rgba(60,30,20,.5); }
.tarjeta-fam .foto { position:relative; min-height:190px; overflow:hidden; }
.tarjeta-fam .foto img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.tarjeta-fam:hover .foto img { transform:scale(1.06); }
.tarjeta-fam .info { padding:18px 18px 20px; display:flex; flex-direction:column; }
.tarjeta-fam .mano { font-size:24px; color:var(--rojo); line-height:1; }
.tarjeta-fam h3 { font-family:"DM Serif Display",serif; font-weight:400; font-size:26px; line-height:1.05; margin-top:6px; }
.tarjeta-fam p { margin-top:8px; font-size:14.5px; line-height:1.45; color:var(--gris); }
.tarjeta-fam .precio { margin-top:auto; padding-top:12px; font-weight:800; color:var(--azul-osc); font-size:15px; }

/* Secciones de la carta */
.secciones { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sec { position:relative; border-radius:22px; overflow:hidden; aspect-ratio:3 / 4; color:#fff; box-shadow:var(--sombra); isolation:isolate; }
.sec img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); z-index:-1; }
.sec::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(20,24,60,.88)); z-index:-1; }
.sec:hover img { transform:scale(1.06); }
.sec .info { position:absolute; left:14px; right:14px; bottom:14px; }
.sec h3 { font-family:"DM Serif Display",serif; font-weight:400; font-size:25px; line-height:1.05; }
.sec span { display:inline-block; margin-top:6px; font-weight:700; font-size:13.5px; background:rgba(255,255,255,.18); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:5px 10px; border-radius:999px; }
.ver-carta { margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; background:var(--azul); color:#fff; border-radius:24px; padding:22px 22px 22px 28px; position:relative; overflow:hidden; transition:transform .3s var(--ease); }
.ver-carta:hover { transform:translateY(-3px); }
.ver-carta::before { content:""; position:absolute; left:0; top:0; bottom:0; width:8px; background:url(manta.png) repeat-y 0 0 / 8px auto; }
.ver-carta b { font-family:"DM Serif Display",serif; font-weight:400; font-size:28px; line-height:1.1; }
.ver-carta small { display:block; margin-top:4px; font-size:15px; color:rgba(255,255,255,.78); }

/* Concepto */
.concepto { background:var(--azul-osc); color:#fff; position:relative; overflow:hidden; }
.concepto .contenedor { display:grid; gap:34px; align-items:center; }
.concepto .ceja { color:#ffd46b; }
.concepto h2 { font-size:clamp(42px,10vw,74px); margin-top:14px; }
.concepto h2 em { color:#ffd46b; }
.concepto .lead { color:rgba(255,255,255,.82); margin-top:18px; }
.quienes { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.quienes span { font-family:"Caveat",cursive; font-weight:600; font-size:24px; background:rgba(255,255,255,.1); padding:4px 14px 6px; border-radius:999px; }
.mosaico { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mosaico .polaroid { position:relative; padding:8px 8px 40px; }
.mosaico .polaroid img { aspect-ratio:4 / 3.4; height:auto; }
.mosaico .polaroid:nth-child(1) { transform:rotate(-3deg); }
.mosaico .polaroid:nth-child(2) { transform:rotate(2.5deg); margin-top:22px; }
.mosaico .polaroid:nth-child(3) { transform:rotate(2deg); margin-top:-12px; }
.mosaico .polaroid:nth-child(4) { transform:rotate(-2.5deg); margin-top:10px; }
.mosaico .polaroid figcaption { font-size:21px; }

/* Reseñas */
.resenas { background:var(--azul); color:#fff; }
.resenas .ceja { color:#ffd46b; }
.resenas .titulo em { color:#ffd46b; }
.nota-google { display:flex; align-items:center; gap:16px; }
.nota-google strong { font-family:"DM Serif Display",serif; font-weight:400; font-size:72px; line-height:1; }
.nota-google .estrellas { color:var(--oro); font-size:22px; letter-spacing:3px; }
.nota-google small { display:block; margin-top:4px; font-size:15px; color:rgba(255,255,255,.78); }
.citas { display:grid; gap:14px; }
.cita { background:rgba(255,255,255,.08); border-radius:22px; padding:24px; }
.cita .estrellas { color:var(--oro); letter-spacing:2px; }
.cita p { margin-top:12px; font-size:18px; line-height:1.55; }
.cita footer { margin-top:14px; display:flex; justify-content:space-between; font-size:14.5px; color:rgba(255,255,255,.72); }

/* Franja para reservar */
.franja-reserva { position:relative; border-radius:30px; overflow:hidden; color:#fff; isolation:isolate; padding:46px 24px; }
.franja-reserva img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.franja-reserva::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(24,30,84,.94), rgba(24,30,84,.62)); z-index:-1; }
.franja-reserva h2 { font-size:clamp(38px,9vw,62px); }
.franja-reserva h2 em { color:#ffd46b; }
.franja-reserva p { margin-top:12px; max-width:44ch; font-size:17.5px; line-height:1.55; color:rgba(255,255,255,.85); }
.franja-reserva .acciones { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }

/* Cabecera de páginas interiores */
.cabeza-pag { position:relative; padding:34px 0 30px; }
.cabeza-pag h1 { font-size:clamp(46px,12vw,86px); margin-top:14px; }
.cabeza-pag .lead { margin-top:14px; max-width:46ch; }
.foto-ancha { border-radius:30px; overflow:hidden; box-shadow:var(--sombra); aspect-ratio:16 / 10; }
.foto-ancha img { width:100%; height:100%; object-fit:cover; }

/* Nosotros */
.pilares { display:grid; gap:14px; }
.pilar { background:#fff; border-radius:24px; padding:24px; box-shadow:var(--sombra); }
.pilar .num { font-family:"Caveat",cursive; font-weight:700; font-size:34px; color:var(--rojo); line-height:1; }
.pilar h3 { font-family:"DM Serif Display",serif; font-weight:400; font-size:28px; margin-top:8px; }
.pilar p { margin-top:8px; font-size:16px; line-height:1.55; color:var(--gris); }
.texto-largo { display:grid; gap:18px; font-size:18px; line-height:1.7; color:var(--gris); max-width:62ch; }
.texto-largo strong { color:var(--tinta); }
.dos-col { display:grid; gap:30px; align-items:center; }

/* Galería */
.filtros { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:22px; scrollbar-width:none; }
.filtros::-webkit-scrollbar { display:none; }
.filtros button { flex:none; height:42px; padding:0 18px; border-radius:999px; background:#fff; font-weight:600; font-size:15px; color:var(--azul-osc); box-shadow:0 0 0 1px rgba(43,57,144,.12); transition:background-color .2s, color .2s, transform .15s; }
.filtros button:hover { background:#f2f4ff; }
.filtros button:active { transform:scale(.95); }
.filtros button.on { background:var(--azul); color:#fff; box-shadow:0 8px 18px -10px rgba(43,57,144,.9); }
.muro { columns:2; column-gap:10px; }
.muro figure { break-inside:avoid; margin-bottom:10px; border-radius:16px; overflow:hidden; position:relative; cursor:zoom-in; background:var(--arena); }
.muro figure img { width:100%; height:auto; transition:transform .6s var(--ease); }
.muro figure:hover img { transform:scale(1.04); }
.muro figure.oculta { display:none; }
.visor { position:fixed; inset:0; z-index:80; background:rgba(16,14,22,.92); display:grid; place-items:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .3s; }
.visor.ver { opacity:1; pointer-events:auto; }
.visor img { max-width:100%; max-height:84vh; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.visor button { position:absolute; width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:26px; display:grid; place-items:center; transition:background .2s; }
.visor button:hover { background:rgba(255,255,255,.24); }
.visor .cerrar { top:16px; right:16px; }
.visor .ant { left:12px; top:50%; transform:translateY(-50%); }
.visor .sig { right:12px; top:50%; transform:translateY(-50%); }

/* Reservas */
.reserva-grid { display:grid; gap:30px; align-items:start; }
.pasos { margin-top:22px; display:grid; gap:14px; }
.pasos div { display:flex; gap:12px; font-size:17px; line-height:1.45; }
.pasos i { width:28px; height:28px; border-radius:50%; background:var(--rojo); color:#fff; display:grid; place-items:center; font-style:normal; font-weight:800; font-size:14px; flex:none; }
.tarjeta { background:#fff; border-radius:28px; padding:24px 20px; box-shadow:var(--sombra); }
.tarjeta h3 { font-family:"DM Serif Display",serif; font-weight:400; font-size:32px; }
.campo { margin-top:20px; }
.campo > label, .campo > .etq { display:block; font-weight:700; font-size:14px; color:var(--gris); margin-bottom:10px; }
.opciones { display:flex; flex-wrap:wrap; gap:8px; }
.opciones button { min-width:52px; height:46px; padding:0 15px; border-radius:14px; background:var(--crema); font-weight:600; font-size:15.5px; transition:background-color .2s, color .2s, transform .15s, box-shadow .2s; }
.opciones button:hover { box-shadow:inset 0 0 0 1.5px var(--azul); }
.opciones button:active { transform:scale(.95); }
.opciones button.on { background:var(--azul); color:#fff; box-shadow:0 8px 18px -10px rgba(43,57,144,.9); }
.opciones .grupo { width:100%; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#a39b90; margin-top:4px; }
.entrada { width:100%; height:52px; border:0; border-radius:14px; background:var(--crema); padding:0 16px; font:500 16px "Outfit",sans-serif; color:var(--tinta); transition:box-shadow .2s; }
.entrada:focus { outline:none; box-shadow:0 0 0 3px rgba(43,57,144,.25); }
.entrada.error { box-shadow:0 0 0 3px rgba(224,38,58,.35); }
.tarjeta .boton { width:100%; margin-top:22px; height:58px; font-size:17px; }
.resumen { text-align:center; color:var(--gris); font-size:14px; margin-top:12px; min-height:20px; }
.aviso { margin-top:24px; background:var(--arena); border-radius:20px; padding:18px 20px; font-size:16px; line-height:1.55; }
.aviso b { display:block; font-family:"DM Serif Display",serif; font-weight:400; font-size:24px; margin-bottom:4px; }

/* Cómo llegar */
.ficha { background:#fff; border-radius:26px; padding:26px 22px; box-shadow:var(--sombra); }
.ficha h3 { font-family:"DM Serif Display",serif; font-weight:400; font-size:32px; margin-top:10px; }
.horario { margin-top:16px; display:grid; gap:6px; }
.horario div { display:flex; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:14px; background:var(--crema); font-size:16.5px; }
.horario div.hoy { background:#e9f7ee; }
.horario div.hoy b::after { content:" · hoy"; color:var(--verde-osc); }
.servicios { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.servicios span { background:var(--arena); border-radius:999px; padding:8px 13px; font-size:14px; font-weight:600; }
.contacto { margin-top:18px; display:grid; gap:8px; font-size:16px; }
.contacto a { font-weight:700; color:var(--azul); }
.contacto a:hover { color:var(--rojo); }
.mapa { position:relative; border-radius:26px; overflow:hidden; min-height:360px; box-shadow:var(--sombra); background:var(--arena) url(mapa.png) center / cover; }
.mapa iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.mapa .direccion { position:absolute; left:12px; right:12px; bottom:12px; background:#fff; border-radius:18px; padding:14px 14px 14px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; box-shadow:0 14px 30px -12px rgba(0,0,0,.4); }
.mapa .direccion b { display:block; font-size:16px; }
.mapa .direccion small { color:var(--gris); font-size:14px; }
.mapa .direccion .boton { height:44px; padding:0 18px; font-size:15px; }
.local-grid { display:grid; gap:16px; }

/* Pie */
.pie { background:var(--tinta); color:#f4ede2; margin-top:0; }
.pie .contenedor { padding:46px 0 34px; display:grid; gap:26px; }
.pie .marca img { width:64px; height:64px; background:#fff; border-radius:50%; padding:3px; }
.pie .marca b { color:#fff; font-size:25px; }
.pie .marca small { color:rgba(244,237,226,.6); }
.pie .frase { font-family:"Caveat",cursive; font-weight:600; font-size:26px; color:#ffd46b; margin-top:12px; }
.pie .col { display:grid; gap:8px; font-size:16px; color:rgba(244,237,226,.84); align-content:start; }
.pie .col b { color:#fff; margin-bottom:2px; }
.pie .col a { transition:color .2s; }
.pie .col a:hover { color:#ffd46b; }
.pie .legal { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:13.5px; color:rgba(244,237,226,.5); padding-top:8px; }
.pie .legal a:hover { color:#fff; }

.flota { position:fixed; right:16px; bottom:max(16px, env(safe-area-inset-bottom)); z-index:40; width:60px; height:60px; border-radius:50%; background:var(--verde); display:grid; place-items:center; box-shadow:0 16px 30px -8px rgba(31,174,84,.75); transition:transform .2s var(--ease); }
.flota:hover { transform:scale(1.07); }
.flota:active { transform:scale(.94); }
.flota svg { width:30px; height:30px; }

.aparece { opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.aparece.visto { opacity:1; transform:none; }

@media (max-width:420px) { .marca small { display:none; } .cabecera .boton.reservar-cab { display:none; } }
@media (min-width:700px) {
  .album { height:520px; }
  .album .p1 { height:380px; } .album .p2 { height:300px; } .album .p3 { height:280px; top:230px; }
  .familia { grid-template-columns:1fr 1fr; }
  .secciones { grid-template-columns:repeat(3,1fr); gap:16px; }
  .sec h3 { font-size:30px; }
  .citas { grid-template-columns:repeat(3,1fr); }
  .pilares { grid-template-columns:repeat(3,1fr); }
  .muro { columns:3; column-gap:14px; }
  .muro figure { margin-bottom:14px; }
  .tarjeta { padding:32px; }
  .franja-reserva { padding:64px 56px; }
}
@media (min-width:1000px) {
  .menu { display:flex; }
  .hamburguesa { display:none; }
  .portada { padding:46px 0 0; }
  .portada .contenedor { grid-template-columns:1fr 1.05fr; gap:40px; align-items:center; }
  .datos-rapidos { flex-wrap:wrap; overflow:visible; }
  .album { height:600px; }
  .album .p1 { height:430px; top:40px; } .album .p2 { height:330px; } .album .p3 { height:310px; top:290px; right:2%; }
  .bloque { padding:100px 0; }
  .concepto .contenedor { grid-template-columns:1fr 1.05fr; gap:70px; }
  .muro { columns:4; }
  .reserva-grid { grid-template-columns:1fr 1fr; gap:64px; }
  .dos-col { grid-template-columns:1fr 1fr; gap:64px; }
  .local-grid { grid-template-columns:1fr 1.2fr; }
  .local-grid .mapa { min-height:560px; }
  .pie .contenedor { grid-template-columns:1.5fr 1fr 1fr 1fr; align-items:start; }
  .pie .legal { grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } html { scroll-behavior:auto; } .aparece { opacity:1; transform:none; } }

/* En el celular, el formulario de reservas va antes: la foto de apoyo solo en PC */
@media (max-width:999px) { .reserva-grid .foto-ancha { display:none; } }

/* SEO 29-oct: alto automático para las fotos con width/height, y preguntas frecuentes */
img { height: auto; }
.faq { display: grid; gap: 10px; }
.faq details { background: #fff; border-radius: 18px; box-shadow: 0 14px 34px -24px rgba(60,30,20,.5); transition: box-shadow .25s; }
.faq details[open] { box-shadow: 0 20px 44px -24px rgba(60,30,20,.6); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 20px; font-weight: 700; font-size: 17px; position: relative; border-radius: 18px; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--crema); display: grid; place-items: center; font-size: 20px; color: var(--rojo); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--rojo); }
.faq details p { padding: 0 20px 18px; font-size: 16px; line-height: 1.6; color: var(--gris); }

/* Celular (30-oct): los hijos de las grillas no pueden ensancharse más que la pantalla
   (la fila de chips sin salto empujaba toda la portada hacia afuera en 360 px) */
.portada .contenedor > *, .reserva-grid > *, .dos-col > *, .local-grid > *, .concepto .contenedor > * { min-width: 0; }
.sec h3 { font-size: clamp(19px, 5.6vw, 25px); overflow-wrap: anywhere; hyphens: auto; }
.tarjeta-fam h3, .pilar h3, .encabezado h2, .cabeza-pag h1, .portada h1 { overflow-wrap: break-word; hyphens: auto; }
@media (min-width:700px) { .sec h3 { font-size: 30px; } }