/* Isabel · Restaurant Bar & Friends
   Identidad: marfil, dorado discreto, tinta verde-azulada y terracota; Fraunces (serif) + Questrial.
   Motivo: el arco con sol de Los Cabos. Contrastes de texto ≥ 4.5:1 sobre el fondo marfil. */
:root{
  --sal:#f6f0e4;        /* marfil: fondo general */
  --papel:#fcf9f3;      /* superficies (tarjetas, formularios) */
  --arena:#ede3d0;      /* crema: secciones alternas */
  --linea:#dccdb0;      /* filetes y bordes */
  --tinta:#14302f;      /* texto principal (12.4:1 sobre marfil) */
  --mar:#3b5f5c;        /* texto secundario (6.2:1) */
  --oro:#a8853f;        /* dorado SOLO decorativo (3.0:1: filetes, ornamentos) */
  --oro-texto:#7a5d22;  /* dorado para texto pequeño (5.4:1; 4.8:1 sobre crema) */
  --oro-claro:#d9bf86;  /* dorado sobre fondos oscuros (7.9:1 sobre tinta) */
  --brasa:#9a3b28;      /* terracota: acentos y precios por confirmar (6.1:1) */
  --sol:#e0a63a;
  --sombra:0 1px 2px rgba(20,48,47,.05),0 12px 32px -18px rgba(20,48,47,.28);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Questrial","Century Gothic","Segoe UI",sans-serif;
  --ancho:76rem;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;background:var(--sal);color:var(--tinta);line-height:1.6;padding-bottom:4.75rem;overflow-x:hidden}
body.sin-scroll{overflow:hidden}
h1,h2,h3{font-family:var(--serif);font-weight:300;margin:0;line-height:1.05}
h2{font-size:clamp(2.4rem,6.5vw,4.2rem);font-style:italic;letter-spacing:-.01em}
img{max-width:100%}
section{scroll-margin-top:1rem}
a{color:inherit}
:focus-visible{outline:2px solid var(--oro-texto);outline-offset:3px}
.contacto :focus-visible,.pie :focus-visible,.nav :focus-visible{outline-color:var(--sol)}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;background:var(--papel);padding:.6rem 1rem;z-index:90}
.saltar:focus{left:.5rem;top:.5rem}
.nota,.vacio{font-size:.92rem;color:var(--mar)}

/* Rótulos y ornamentos */
.antetitulo{margin:0 0 .6rem;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--oro-texto)}
.orn{position:relative;width:7.5rem;height:.7rem;margin:1rem 0 1.4rem;
  background:linear-gradient(var(--oro),var(--oro)) 0 50%/40% 1px no-repeat,linear-gradient(var(--oro),var(--oro)) 100% 50%/40% 1px no-repeat}
.orn::before{content:"";position:absolute;left:50%;top:50%;width:.42rem;height:.42rem;background:var(--oro);transform:translate(-50%,-50%) rotate(45deg)}

/* Sello (logotipo tipográfico; si existe el logo real, lo sustituye) */
.sello{position:absolute;top:1.1rem;left:1.25rem;z-index:6;font-family:var(--serif);font-style:italic;font-size:1.45rem;text-decoration:none;line-height:1}
.sello small{display:block;margin-top:.3rem;font-family:var(--sans);font-style:normal;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-texto)}
.sello .logo{display:block;height:3rem;width:auto;max-width:11rem}
.sello.con-logo .sello-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Aviso sin conexión */
.aviso-red{position:fixed;z-index:70;top:0;left:0;right:0;margin:0;padding:.6rem 1.25rem;background:var(--tinta);color:var(--sal);font-size:.88rem;border-bottom:2px solid var(--oro);text-align:center}

/* Navegación: barra inferior en móvil, marcador vertical en escritorio */
.nav{position:fixed;z-index:20;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:.15rem;
  background:rgba(246,240,228,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--linea);
  padding:.35rem .5rem calc(.35rem + env(safe-area-inset-bottom))}
.nav a,.nav-pedido{color:var(--tinta);text-decoration:none;font-size:.9rem;padding:.5rem .35rem;min-height:2.75rem;display:flex;align-items:center;gap:.35rem;background:none;border:0;font-family:inherit;cursor:pointer;white-space:nowrap}
.nav a.activo{color:var(--brasa);box-shadow:inset 0 -2px 0 var(--oro)}
.nav-pedido{background:var(--tinta);color:var(--sal);border-radius:999px;padding:.45rem .95rem;margin-left:.2rem}
.badge{background:var(--brasa);color:var(--sal);min-width:1.4rem;padding:0 .35rem;text-align:center;font-size:.78rem;line-height:1.4rem;border-radius:1rem}
.badge.bump{animation:bump .35s}
@keyframes bump{50%{transform:scale(1.4)}}
@media(max-width:22rem){.nav a,.nav-pedido{font-size:.82rem;padding-left:.25rem;padding-right:.25rem}.nav-pedido{padding:.4rem .7rem}}
@media(min-width:48rem){
 body{padding-bottom:0}
 .nav{left:auto;top:50%;bottom:auto;right:1.1rem;transform:translateY(-50%);flex-direction:column;gap:.7rem;background:none;border:0;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none;mix-blend-mode:difference}
 .nav a{color:#fff;writing-mode:vertical-rl;padding:.3rem .2rem;position:relative;letter-spacing:.06em}
 .nav a::before{content:"";position:absolute;right:-.7rem;top:50%;width:.36rem;height:.36rem;background:#fff;transform:translateY(-50%) rotate(45deg) scale(0);transition:transform .25s}
 .nav a.activo{color:#fff;box-shadow:none}.nav a.activo::before{transform:translateY(-50%) rotate(45deg) scale(1)}
 .nav-pedido{mix-blend-mode:normal;writing-mode:vertical-rl;border-radius:999px 999px 0 0;padding:1rem .55rem;min-height:0;margin:.8rem 0 0}
}

/* Portada */
.portada{position:relative;display:flex;flex-direction:column;padding:5rem 1.25rem 2.5rem;overflow:hidden}
.marca{order:1;position:relative;z-index:3;font-style:italic;font-weight:300;font-size:clamp(5.5rem,29vw,9rem);letter-spacing:-.02em;margin-bottom:-.36em;display:flex}
.marca span{display:inline-block;animation:letra .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*70ms + 200ms)}
@keyframes letra{from{transform:translateY(60%);opacity:0}}
.arco-hero{order:2;position:relative;margin:0 .6rem;height:58svh;min-height:20rem;border-radius:999px 999px 0 0;overflow:hidden;outline:1px solid var(--oro);outline-offset:9px;
  background:linear-gradient(180deg,#f5e2c0 0,#efb48b 42%,#e2876a 63%,#14302f 63%)}
.arco-hero img.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.arco-hero.con-foto .escena{display:none}
.sol{position:absolute;left:50%;bottom:34%;width:38%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#f8d577,#e0a63a);transform:translateX(-50%);animation:sol 2.2s cubic-bezier(.2,.7,.2,1) .3s both}
@keyframes sol{from{transform:translate(-50%,70%)}}
.olas{position:absolute;left:0;width:200%;animation:marea 16s linear infinite}
.olas-a{bottom:14%;height:26%;fill:#2a6a68}
.olas-b{bottom:0;height:22%;fill:#14302f;animation-duration:11s;animation-direction:reverse}
@keyframes marea{to{transform:translateX(-50%)}}
.arco-hero figcaption{position:absolute;left:0;right:0;bottom:.6rem;text-align:center;font-size:.75rem;color:#fff;z-index:3;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.subtitulo{order:3;margin:2rem 0 0;font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;color:var(--oro-texto)}
.lema{order:4;max-width:27rem;margin:.6rem 0 1.4rem;font-family:var(--serif);font-weight:300;font-size:1.35rem;line-height:1.45}
.portada-acc{order:5;display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem}
.cta{font:inherit;font-size:.98rem;letter-spacing:.02em;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:var(--tinta);color:var(--sal);border:1px solid var(--tinta);padding:.75rem 1.6rem;min-height:3rem;border-radius:2px;transition:background .2s,border-color .2s,color .2s}
.cta:hover{background:var(--brasa);border-color:var(--brasa)}
.cta.sec{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.cta.sec:hover{background:var(--tinta);color:var(--sal)}
.cta:disabled{opacity:.55;cursor:not-allowed}
.cta[aria-busy=true]{cursor:wait}
.enlace{text-underline-offset:.35em;text-decoration-thickness:1px;text-decoration-color:var(--oro)}
.enlace:hover{text-decoration-thickness:2px}
@media(min-width:48rem){
 .portada{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto auto 1fr;min-height:100svh;padding:5rem 5.5rem 3.5rem 3.5rem;column-gap:1.5rem}
 .marca{grid-column:1/10;grid-row:1;font-size:clamp(7rem,20vw,18rem);margin:0;align-self:start}
 .arco-hero{grid-column:7/13;grid-row:1/5;height:min(84svh,54rem);margin:2.5rem 0 0}
 .subtitulo{grid-column:1/6;grid-row:2;align-self:end;margin-top:0}
 .lema{grid-column:1/6;grid-row:3;font-size:1.55rem}
 .portada-acc{grid-column:1/6;grid-row:4;align-self:start}
}

/* Momentos en la portada */
.momentos-portada{max-width:var(--ancho);margin:0 auto;padding:1.5rem 1.25rem 1rem}
.momentos-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.momento-tarjeta{position:relative;display:block;width:100%;padding:0;border:0;background:var(--arena);cursor:pointer;aspect-ratio:3/4;border-radius:999px 999px 0 0;overflow:hidden;font:inherit;color:var(--sal)}
.momento-tarjeta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.momento-tarjeta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(14,32,31,.78))}
.momento-tarjeta:hover img{transform:scale(1.05)}
.momento-nombre{position:absolute;z-index:1;left:0;right:0;bottom:1rem;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,4.5vw,2rem)}
.nota-ilustrativa{margin:.9rem 0 0;font-size:.8rem;text-align:center}
@media(min-width:48rem){.momentos-portada{padding:3rem 5.5rem 1rem 3.5rem}.momentos-rejilla{grid-template-columns:repeat(4,1fr);gap:1.5rem}}

/* Carta */
.carta{padding:4rem 1.25rem 2rem;max-width:var(--ancho);margin:0 auto}
.carta-enc{text-align:center}
.carta-enc .orn,.eventos .orn{margin-left:auto;margin-right:auto}
.carta-enc p{margin:.4rem auto 0;max-width:34rem}
.leyenda{font-size:.88rem;color:var(--mar)}
.pv{color:var(--oro);font-size:.72em;margin-left:.2rem;vertical-align:super;cursor:help}
.barra-carta{position:sticky;top:0;z-index:4;background:rgba(246,240,228,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);margin-top:2rem;padding-top:.6rem;border-bottom:1px solid var(--linea)}
.buscador{display:flex;align-items:center;gap:.5rem;max-width:34rem;margin:0 auto .3rem}
.buscador input{flex:1;font-size:1rem;padding:.65rem 1rem .65rem 2.6rem;border:1px solid var(--linea);border-radius:999px;background:var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5d22' stroke-width='1.6'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") 1rem 50%/1.05rem no-repeat}
.buscador input:focus-visible{border-color:var(--oro-texto)}
.limpiar,.enlace-btn,.pie-btn{font:inherit;cursor:pointer;background:none;border:0;padding:.4rem .2rem;min-height:2.75rem;color:inherit;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px;text-decoration-color:var(--oro)}
.momentos{display:flex;gap:.25rem;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
/* Centradas cuando caben; si no caben se desplazan sin cortar la primera (justify-content:center la haría inalcanzable). */
.momentos button:first-child{margin-left:auto}.momentos button:last-child{margin-right:auto}
.momentos::-webkit-scrollbar,.cats::-webkit-scrollbar{display:none}
.momentos button{font-family:var(--serif);font-style:italic;font-size:1.2rem;cursor:pointer;min-height:2.75rem;padding:.3rem .9rem;border:0;border-bottom:2px solid transparent;background:none;color:var(--tinta);flex:none}
.momentos button[aria-selected=true]{color:var(--brasa);border-bottom-color:var(--oro)}
.cats{display:flex;gap:.5rem;overflow-x:auto;white-space:nowrap;padding:.55rem 0 .7rem;scrollbar-width:none}
.cats a{display:flex;align-items:center;min-height:2.75rem;padding:.35rem 1rem;border:1px solid var(--linea);border-radius:999px;background:var(--papel);text-decoration:none;font-size:.9rem;flex:none;transition:background .2s,color .2s,border-color .2s}
.cats a:hover{background:var(--tinta);border-color:var(--tinta);color:var(--sal)}
#estado-busqueda{min-height:1.2rem;margin:.6rem 0 0;text-align:center}
.agotado{font-size:.85rem;font-style:italic;color:var(--brasa);align-self:center}

/* Estados de la carta */
.cargando-carta{display:flex;justify-content:center;align-items:center;gap:.7rem;padding:4rem 0 1rem;margin:0;color:var(--mar)}
.giro{display:inline-block;width:1.1rem;height:1.1rem;border:2px solid var(--oro);border-right-color:transparent;border-radius:50%;animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.carga-lenta{text-align:center;color:var(--mar);opacity:0;visibility:hidden;animation:aparecer .01s 8s forwards}
@keyframes aparecer{to{opacity:1;visibility:visible}}
.carta-error{max-width:30rem;margin:3rem auto;padding:2rem 1.5rem;text-align:center;background:var(--papel);border:1px solid var(--linea);box-shadow:var(--sombra)}
.carta-error-t{font-family:var(--serif);font-style:italic;font-size:1.8rem;color:var(--brasa);margin:0 0 .4rem;line-height:1.1}
.vacio{text-align:center;padding:2rem 0}

/* Bloques de categoría */
.bloque{display:grid;gap:1.6rem;margin-top:3.5rem;scroll-margin-top:9.5rem}
.arco{position:relative;margin:0 .5rem;aspect-ratio:4/3;border-radius:999px 999px 0 0;overflow:hidden;display:grid;place-items:center;--ink:var(--sal);outline:1px solid var(--oro);outline-offset:7px}
.arco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.inicial{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(5rem,22vw,9rem);color:var(--ink);opacity:.92;line-height:1}
.arco[data-arte=sol]{background:radial-gradient(circle at 50% 80%,#f3cf78 0 22%,transparent 23%),linear-gradient(#f5e2c0,#e7a07c);--ink:var(--tinta)}
.arco[data-arte=arena]{background:radial-gradient(rgba(168,133,63,.55) 1.4px,transparent 1.8px) 0 0/15px 15px,var(--arena);--ink:var(--oro-texto)}
.arco[data-arte=olas]{background:repeating-radial-gradient(circle at 50% 130%,#2a6a68 0 14px,#3b7774 14px 28px)}
.arco[data-arte=mar]{background:linear-gradient(160deg,#3b7774,#14302f)}
.arco[data-arte=brasa]{background:radial-gradient(circle at 30% 85%,rgba(224,166,58,.85),transparent 42%),radial-gradient(circle at 70% 75%,#9a3b28,transparent 55%),#3a1d16}
.sello-ilustrativa{position:absolute;z-index:2;left:50%;bottom:.7rem;transform:translateX(-50%);margin:0;padding:.15rem .7rem;border-radius:999px;background:rgba(14,32,31,.7);color:var(--sal);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.bloque-txt h3{font-size:clamp(2.1rem,7vw,3rem);font-style:italic}
.sub{margin:.5rem 0 1rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-texto);min-height:.5rem}
.platos{list-style:none;margin:0;padding:0}
.platos li{display:grid;grid-template-columns:auto 1fr auto auto;align-items:baseline;column-gap:.6rem;padding:.75rem 0}
.platos li+li{border-top:1px solid rgba(220,205,176,.55)}
.nom{font-size:1.06rem}
.guia{border-bottom:1px dotted var(--oro);transform:translateY(-.3rem);opacity:.7}
.pre{white-space:nowrap;font-family:var(--serif);font-size:1.12rem;font-variant-numeric:tabular-nums}
.mas{font:inherit;font-size:1.2rem;line-height:1;width:2.75rem;height:2.75rem;border:1px solid var(--tinta);border-radius:50%;background:none;color:var(--tinta);cursor:pointer;align-self:center;transition:background .2s,color .2s}
.mas:hover{background:var(--tinta);color:var(--sal)}
.desc,.etq{grid-column:1/-1;margin:.2rem 0 0;font-size:.88rem;color:var(--mar)}
.etq{font-style:italic;color:var(--brasa)}
.mini{width:3rem;height:3rem;object-fit:cover;border-radius:999px 999px 0 0}
.pre.sp{grid-column:3/-1;text-align:right;font-family:var(--sans);font-style:italic;font-size:.88rem;color:var(--brasa);white-space:normal}
.estilos{margin-top:1.2rem;padding:1rem 1.2rem;background:var(--papel);border-left:2px solid var(--oro);font-size:.9rem}
.estilos h4{margin:0 0 .3rem;font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.2rem;color:var(--brasa)}
.estilos ul{margin:0;padding-left:1.1rem}
.bloque-txt>.nota{margin-top:1rem}
@media(min-width:48rem){
 .carta{padding:6rem 5.5rem 3rem 3.5rem}
 .bloque{grid-template-columns:5fr 7fr;gap:3.5rem;margin-top:5.5rem;align-items:start}
 .arco{aspect-ratio:4/5;width:100%;max-width:22.5rem;margin:0;justify-self:center}
 .bloque:nth-child(even){grid-template-columns:7fr 5fr}
 .bloque:nth-child(even) .arco{order:2}
 .bloque:nth-child(odd) .arco{margin-top:2.5rem}
 .bloque:nth-child(even) .bloque-txt{margin-top:3rem}
}

/* Eventos */
.eventos{padding:4rem 1.25rem;max-width:var(--ancho);margin:0 auto;text-align:center}
.boletos{display:grid;gap:1.4rem;justify-items:center}
.boleto{margin:1rem auto 0;background:var(--papel);color:var(--tinta);padding:2.6rem 2.2rem;max-width:34rem;border:1px solid var(--oro);box-shadow:inset 0 0 0 6px var(--papel),inset 0 0 0 7px rgba(168,133,63,.45);
  -webkit-mask:radial-gradient(circle .9rem at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle .9rem at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle .9rem at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle .9rem at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat}
.boleto-t{font-family:var(--serif);font-style:italic;font-size:2.3rem;margin:0 0 .5rem;line-height:1.05;color:var(--brasa)}
.boleto-f{margin:0 0 .6rem;color:var(--oro-texto);text-transform:capitalize}
.boleto p:last-child{margin:0;color:var(--mar)}
@media(min-width:48rem){.eventos{padding:5rem 5.5rem 5rem 3.5rem}.boletos{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}}

/* Reservaciones */
.reservar{margin:3rem 0 0;padding:4rem 1.25rem;background:var(--arena);display:grid;gap:2.2rem}
.res-texto>p{max-width:30rem}
.res-foto{position:relative;margin:1.6rem .5rem 0;max-width:24rem;aspect-ratio:16/10;border-radius:999px 999px 0 0;overflow:hidden;outline:1px solid var(--oro);outline-offset:7px}
.res-foto img{width:100%;height:100%;object-fit:cover;display:block}
.res-tarjeta{background:var(--papel);border:1px solid var(--linea);border-top:2px solid var(--oro);box-shadow:var(--sombra);padding:1.6rem;max-width:32rem;width:100%}
label{display:block;margin-top:1rem;font-size:.86rem;letter-spacing:.04em;color:var(--mar)}
input,textarea,select{font:inherit;width:100%;padding:.55rem 0;border:0;border-bottom:1px solid var(--tinta);background:transparent;border-radius:0;color:var(--tinta)}
textarea{resize:vertical}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;border-bottom:2px solid var(--oro-texto);margin-bottom:-1px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.opc{font-size:.8rem}
.estado{min-height:1.5rem;margin:.9rem 0;font-size:.95rem}
.estado.error{color:var(--brasa)}
.estado.cargando::before{content:"";display:inline-block;width:.85rem;height:.85rem;margin-right:.5rem;border:2px solid var(--oro);border-right-color:transparent;border-radius:50%;vertical-align:-.1rem;animation:giro .8s linear infinite}
.mis{margin-top:1.4rem;font-size:.92rem}
.mis h3{font-size:1.35rem;font-style:italic}
.mis ul{margin:.4rem 0;padding-left:1.1rem}
@media(min-width:48rem){
 .reservar{grid-template-columns:5fr 6fr;padding:6rem 5.5rem 6rem 3.5rem;align-items:center;gap:4.5rem}
 .res-foto{aspect-ratio:4/5;max-width:20rem;margin-left:0}
 .res-tarjeta{justify-self:start;padding:2.4rem}
}

/* Contacto y pie */
.contacto{background:var(--tinta);color:var(--sal);padding:4.5rem 1.25rem}
.contacto .antetitulo{color:var(--oro-claro)}
.contacto .orn{--oro:var(--oro-claro);background:linear-gradient(var(--oro-claro),var(--oro-claro)) 0 50%/40% 1px no-repeat,linear-gradient(var(--oro-claro),var(--oro-claro)) 100% 50%/40% 1px no-repeat}
.contacto .orn::before{background:var(--oro-claro)}
.tel{display:block;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(2rem,9vw,4.5rem);text-decoration:none;color:var(--sol);line-height:1.1}
address{font-style:normal;margin:1.2rem 0}
.contacto .enlace{text-decoration-color:var(--oro-claro)}
.contacto .nota{color:#a9c4c2}
@media(min-width:48rem){.contacto{padding:6rem 5.5rem 6rem 3.5rem}}
.pie{background:#0e2423;color:#a9c4c2;text-align:center;font-size:.85rem;padding:2rem 1rem 2.4rem}
.pie p{margin:0}
.pie-marca{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--sal);margin-bottom:.6rem!important}
.pie-marca small{display:block;font-family:var(--sans);font-style:normal;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--oro-claro);margin-top:.3rem}
.pie-btn{color:#cfe0de;font-size:.85rem;min-height:2.75rem;text-decoration-color:var(--oro-claro)}

/* Pedido: cajón lateral (escritorio) y hoja inferior (móvil) */
.velo{position:fixed;inset:0;background:rgba(14,32,31,.5);z-index:40}
.cajon{position:fixed;z-index:50;background:var(--papel);padding:1.4rem 1.4rem calc(1.4rem + env(safe-area-inset-bottom));overflow-y:auto;transition:transform .35s cubic-bezier(.2,.7,.2,1);left:0;right:0;bottom:0;max-height:90svh;border-radius:1.25rem 1.25rem 0 0;transform:translateY(105%);box-shadow:0 -10px 40px -20px rgba(14,32,31,.4)}
.cajon.abierto{transform:none}
.cajon-enc{display:flex;justify-content:space-between;align-items:center;padding-bottom:.8rem;border-bottom:1px solid var(--linea)}
.cajon-enc h2{font-size:2.3rem}
.cerrar{font:inherit;cursor:pointer;background:none;border:1px solid var(--tinta);border-radius:999px;padding:.4rem 1rem;min-height:2.75rem;color:var(--tinta)}
.aviso{margin:.8rem 0 0;padding:.7rem .9rem;border-left:2px solid var(--oro);background:var(--arena);font-size:.9rem}
.linea{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.8rem 0;border-bottom:1px solid var(--linea)}
.linea small{color:var(--mar)}
.cant{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
.cant button{font:inherit;cursor:pointer;min-width:2.6rem;min-height:2.6rem;border:1px solid var(--tinta);border-radius:999px;background:none;color:var(--tinta);padding:0 .6rem}
.cant button:disabled{opacity:.35;cursor:not-allowed}
.total{font-family:var(--serif);font-size:1.6rem;text-align:right;margin:1rem 0;padding-top:.6rem;border-top:1px solid var(--oro)}
.resumen{border:1px dashed var(--oro);background:var(--sal);padding:.9rem;margin-top:.9rem}
.acciones{display:flex;flex-wrap:wrap;gap:.6rem}
.exito{padding:1rem 0;outline:none}
.exito-t{font-family:var(--serif);font-style:italic;font-size:2.1rem;margin:0 0 .4rem;color:var(--mar);line-height:1}
@media(min-width:48rem){.cajon{left:auto;top:0;width:28rem;max-height:none;border-radius:0;transform:translateX(105%)}}
.toast{position:fixed;z-index:60;left:50%;bottom:5.6rem;transform:translate(-50%,1rem);background:var(--tinta);color:var(--sal);padding:.6rem 1.2rem;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;margin:0;width:max-content;max-width:calc(100vw - 2rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:var(--sombra)}
.toast.ver{opacity:1;transform:translate(-50%,0)}
@media(min-width:48rem){.toast{bottom:1.6rem}}

/* Diálogo de instalación */
.dialogo{border:1px solid var(--linea);border-top:2px solid var(--oro);background:var(--papel);color:var(--tinta);padding:1.6rem;max-width:27rem;width:calc(100% - 2rem);box-shadow:var(--sombra)}
.dialogo::backdrop{background:rgba(14,32,31,.5)}
.dialogo h2{font-size:2.1rem;margin-bottom:.8rem}
.pasos dt{font-weight:bold;margin-top:.9rem}
.pasos dd{margin:0;color:var(--mar)}

/* Pantalla de bienvenida: solo una vez por visita; sin JavaScript no aparece */
.bienvenida{display:none;position:fixed;inset:0;z-index:100;background:var(--sal);color:var(--tinta);place-content:center;justify-items:center;text-align:center;gap:.4rem;cursor:pointer;transition:opacity .5s ease,visibility .5s}
.con-bienvenida .bienvenida{display:grid;animation:bienv-fin .01s 4.5s forwards}
.bienvenida.salir{opacity:0;visibility:hidden;pointer-events:none}
@keyframes bienv-fin{to{opacity:0;visibility:hidden;pointer-events:none}}
.bienv-arco{position:relative;width:4.6rem;height:6rem;border:1.5px solid var(--oro);border-bottom:0;border-radius:999px 999px 0 0;overflow:hidden;animation:bienv-arco .9s ease both}
.bienv-arco span{position:absolute;left:50%;bottom:-1.1rem;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--oro);transform:translateX(-50%);animation:bienv-sol 1.4s .3s ease both}
@keyframes bienv-arco{from{transform:scaleY(.2);opacity:0}}
@keyframes bienv-sol{from{transform:translate(-50%,100%)}}
.bienv-nombre{margin:1rem 0 0;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(3rem,13vw,5.5rem);line-height:1;animation:bienv-txt .9s .25s ease both}
.bienv-sub{margin:.4rem 0 0;font-size:clamp(.62rem,2.4vw,.78rem);letter-spacing:.3em;color:var(--oro-texto);animation:bienv-txt .9s .5s ease both}
@keyframes bienv-txt{from{opacity:0;transform:translateY(.6rem)}}
.con-bienvenida .marca span{animation-delay:calc(var(--i)*70ms + 1500ms)}
.con-bienvenida .sol{animation-delay:1.5s}

/* Páginas sencillas: créditos, 404 y sin conexión */
.pagina-simple{padding-bottom:0}
.creditos,.pagina-404{max-width:52rem;margin:0 auto;padding:3rem 1.25rem 4rem}
.creditos h1,.pagina-404 h1{font-size:clamp(2.4rem,7vw,3.6rem);font-style:italic;margin-top:1rem}
.lista-creditos{list-style:none;margin:2rem 0;padding:0;display:grid;gap:1rem}
.lista-creditos li{display:grid;grid-template-columns:6rem 1fr;gap:1rem;align-items:start;padding-bottom:1rem;border-bottom:1px solid var(--linea);font-size:.88rem;color:var(--mar)}
.lista-creditos img{width:6rem;height:4.5rem;object-fit:cover;border-radius:2px}
.lista-creditos strong{color:var(--tinta);font-weight:normal;font-size:1rem}
.lista-creditos a{color:var(--oro-texto)}

@media(prefers-reduced-motion:reduce){
 *:not(.carga-lenta),*::before,*::after{animation:none!important;transition:none!important}
 html{scroll-behavior:auto}
 .con-bienvenida .bienvenida{display:none}
 .carga-lenta{animation-duration:.01s!important}
}