/* Safraner · la web (portada). Usa los colores y letras de base.css. */

/* Animación común: entra de abajo una vez, al llegar. En reposo, todo visible. */
.anim.visto{animation:sube .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 110ms)}
@keyframes sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.bloque{padding-block:clamp(64px,9vw,112px)}
.cab-bloque{display:grid;gap:12px;margin-bottom:clamp(28px,4vw,44px)}
.cab-bloque h2{font-size:clamp(34px,4.6vw,54px)}
.cab-bloque.centro{justify-items:center;text-align:center}
.banda-toile{height:clamp(30px,4vw,46px);background:var(--toile) 0 0/clamp(150px,16vw,220px) repeat;border-block:1px solid rgba(34,64,140,.3)}

/* Portada */
.portada{position:relative;background:var(--crema) var(--toile) 0 0/clamp(240px,24vw,340px) repeat;overflow:hidden}
.portada .envoltura{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,70px);align-items:center;min-height:min(78vh,760px);padding-block:clamp(40px,6vw,80px)}
.portada .ficha{position:relative;z-index:2;background:var(--crema);padding:clamp(28px,4vw,52px);box-shadow:0 26px 50px -30px rgba(31,42,68,.6)}
.portada .ficha::before{content:"";position:absolute;inset:10px;border:1px solid rgba(34,64,140,.35);pointer-events:none}
.portada h1{font-size:clamp(44px,6vw,80px);margin-top:14px}
.portada h1 em{color:var(--cobalto)}
.portada .lead{margin-top:16px}
.portada .acciones{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center;margin-top:28px}
.estado{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:14.5px;color:var(--suave)}
.estado i{width:9px;height:9px;border-radius:50%;background:var(--lino)}
.estado.abierto i{background:#3E9A5A}
.medallon{position:relative;justify-self:center;width:min(100%,520px);aspect-ratio:4/5;border-radius:50%;background:var(--blanco);padding:clamp(10px,1.4vw,16px);box-shadow:0 30px 60px -30px rgba(31,42,68,.7)}
.medallon::after{content:"";position:absolute;inset:clamp(5px,.7vw,8px);border-radius:50%;border:1px solid rgba(34,64,140,.4);pointer-events:none}
.medallon .dentro{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#d9d4ca}
.medallon video,.medallon img{width:100%;height:100%;object-fit:cover;object-position:46% 50%}
.cortina{position:absolute;top:0;bottom:0;width:51%;z-index:2;background:var(--crema) var(--toile) 0 0/220px repeat;box-shadow:inset 0 0 26px rgba(31,42,68,.25);transform:translateX(-102%)}
.cortina.d{right:0;transform:translateX(102%)}
.cortina.i{left:0;background-position:right top}
.abre .cortina.i{animation:cortina-i 2.3s .3s cubic-bezier(.65,0,.25,1) both}
.abre .cortina.d{animation:cortina-d 2.3s .3s cubic-bezier(.65,0,.25,1) both}
@keyframes cortina-i{from{transform:none}to{transform:translateX(-102%)}}
@keyframes cortina-d{from{transform:none}to{transform:translateX(102%)}}
.abre .medallon video,.abre .medallon img{animation:acerca 4.4s .3s cubic-bezier(.2,.6,.2,1) both}
@keyframes acerca{from{transform:scale(1.14)}to{transform:none}}
@media (max-width:860px){
  .portada .envoltura{grid-template-columns:1fr;min-height:0;padding-block:28px 40px}
  .medallon{width:min(78%,360px);order:-1}
  .portada h1{font-size:clamp(40px,11vw,56px)}
}

/* La hoja de hoy */
.hoy{background:var(--blanco)}
.hoy .envoltura{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,80px);align-items:center}
@media (max-width:860px){.hoy .envoltura{grid-template-columns:1fr}}
.hoy .texto{display:grid;gap:16px;align-content:start}
.hoy h2{font-size:clamp(34px,4.6vw,54px)}
.hoy .puntos{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:12px}
.hoy .puntos li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:start;color:var(--suave)}
.hoy .puntos b{display:block;color:var(--marino)}
.hoy .puntos svg{width:38px;height:38px;color:var(--cobalto)}
.hoy .acciones{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:8px}
.hoy .sitio-hoja{max-width:520px;width:100%;justify-self:center}

/* Lo que más piden */
.platos{background:var(--crema)}
.rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,4vw,48px) clamp(18px,3vw,40px)}
@media (max-width:860px){.rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.rejilla{gap:26px 14px}.plato h3{font-size:18px}.plato p{font-size:13px}}
.plato{display:grid;gap:14px;justify-items:center;text-align:center;text-decoration:none;color:inherit}
/* El plato solo, recortado, sin marco ni sombra */
.plato .ov{width:min(100%,320px);aspect-ratio:1;display:grid;place-items:center;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.plato .ov img{width:100%;height:100%;object-fit:contain}
.plato:hover .ov{transform:translateY(-4px)}
.plato h3{font-size:clamp(21px,2.2vw,25px)}
.plato p{font-size:15px;color:var(--suave);margin-top:-8px}
.plato b{font:600 15px/1 var(--f-texto);color:var(--cobalto)}
.nota-ia{margin-top:30px;text-align:center;font-size:13.5px;color:var(--suave)}

/* Arroces */
.arroces{background:var(--blanco)}
.arroces .envoltura{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,80px);align-items:start}
@media (max-width:860px){.arroces .envoltura{grid-template-columns:1fr}}
/* La paella recortada, quieta, sin marco */
.paellera{margin-top:clamp(0px,4vw,40px)}
.paellera img{width:100%;height:auto}
@media (max-width:860px){.paellera{width:min(86%,420px);justify-self:center;margin-top:0}}
.filtro{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 8px}
.filtro button{border:1px solid var(--linea);background:var(--crema);color:var(--marino);border-radius:99px;padding:9px 15px;font:600 13px/1 var(--f-texto)}
.filtro button[aria-pressed="true"]{background:var(--cobalto);border-color:var(--cobalto);color:#fff}
.lista{list-style:none;margin:0;padding:0}
.lista li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;padding:13px 0;border-bottom:1px dotted rgba(34,64,140,.35)}
.lista .n{font-family:var(--f-titulo);font-size:20px;color:var(--marino);line-height:1.25}
.lista .d{grid-column:1;font-size:14px;color:var(--suave)}
.lista b{grid-column:2;grid-row:1 / span 2;align-self:center;font-weight:600;color:var(--cobalto);white-space:nowrap}
.marca{display:inline-block;font:700 10.5px/1 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--azafran);color:#8a5f0c;border-radius:99px;padding:4px 7px;margin-left:8px;vertical-align:3px}
.aviso{margin-top:22px;padding:16px 18px;border:1px dashed var(--cobalto);font-size:15px;color:var(--texto);display:grid;gap:10px}
.aviso b{color:var(--marino)}

/* La cuchara */
.cuchara{background:var(--crema)}
.semana{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:900px){.semana{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.semana{grid-template-columns:1fr}}
.dia-c{background:var(--blanco);padding:18px 20px 22px;display:grid;gap:8px;align-content:start;border:1px solid var(--linea);position:relative}
.dia-c img{width:100%;aspect-ratio:1;object-fit:contain;margin-bottom:4px}
.dia-c .d{font:700 12px/1 var(--f-texto);letter-spacing:.24em;text-transform:uppercase;color:var(--cobalto)}
.dia-c p{font-family:var(--f-mano);font-size:27px;line-height:1.05;color:var(--tinta)}
.dia-c.hoy-c{border-color:var(--cobalto);box-shadow:0 0 0 2px var(--cobalto) inset}
.dia-c.hoy-c::after{content:"Hoy";position:absolute;top:-11px;right:14px;background:var(--azafran);color:var(--tinta);font:800 11px/1 var(--f-texto);letter-spacing:.1em;text-transform:uppercase;padding:6px 9px}
.cuchara .fotos{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:22px}
@media (max-width:640px){.cuchara .fotos{grid-template-columns:1fr}}
.cuchara figure{margin:0;position:relative;overflow:hidden;aspect-ratio:16/11;background:#ddd}
.cuchara figure img{width:100%;height:100%;object-fit:cover}
.cuchara figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 14px;background:linear-gradient(180deg,rgba(31,42,68,0),rgba(31,42,68,.82));color:#fff;font-size:15px}
.cuchara figcaption b{display:block;font-family:var(--f-titulo);font-weight:500;font-size:21px}
.cuchara .fuera{margin-top:16px;color:var(--suave);font-size:15px}

/* Brasa de lonja */
.brasa{background:var(--marino);color:#E6E9F1}
.brasa .envoltura{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,80px);align-items:center}
@media (max-width:860px){.brasa .envoltura{grid-template-columns:1fr}}
.brasa h2{color:#fff;font-size:clamp(34px,4.6vw,54px)}
.brasa .ceja{color:#AFC0E8}
.brasa .lead{color:#C4CAD9;margin-top:14px}
.puertos{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;list-style:none;padding:0}
.puertos li{border:1px solid rgba(255,255,255,.25);padding:7px 12px;font-size:14px;color:#fff;border-radius:99px}
.brasa .medallon{background:#2B3756;width:min(100%,460px)}
.brasa .medallon::after{border-color:rgba(255,255,255,.3)}
.brasa .acciones{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:26px}
.brasa .enlace{color:#fff}
.brasa .boton{background:var(--azafran);color:var(--tinta)}
.brasa .boton:hover{background:#fff}

/* La casa */
.casa{background:var(--blanco)}
.casa .envoltura{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(30px,6vw,80px);align-items:center}
@media (max-width:860px){.casa .envoltura{grid-template-columns:1fr}}
.marco img{width:100%;aspect-ratio:16/10;object-fit:cover}
.casa .texto{display:grid;gap:16px}
.casa h2{font-size:clamp(34px,4.6vw,54px)}
.casa .datos{display:flex;gap:28px;flex-wrap:wrap;margin-top:6px}
.casa .datos div{display:grid}
.casa .datos b{font-family:var(--f-titulo);font-size:36px;font-weight:500;color:var(--cobalto);line-height:1}
.casa .datos span{font-size:14px;color:var(--suave)}

/* Horario y reservas */
.donde{background:var(--crema)}
.donde .envoltura{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(30px,5vw,60px);align-items:start}
@media (max-width:860px){.donde .envoltura{grid-template-columns:1fr}}
.donde h2{font-size:clamp(34px,4.6vw,54px)}
.horas{list-style:none;margin:18px 0 0;padding:0}
.horas li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--linea)}
.horas li span:first-child{text-transform:capitalize}
.horas li.hoy{font-weight:700;color:var(--marino)}
.horas em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--azafran);color:var(--tinta);padding:3px 6px;margin-left:6px;vertical-align:2px}
.contacto{display:grid;gap:14px;margin-top:24px}
.tel{font-family:var(--f-titulo);font-size:clamp(30px,4vw,40px);color:var(--cobalto);user-select:all}
.contacto .acciones{display:flex;flex-wrap:wrap;gap:12px}
.mapa{position:relative;overflow:hidden;border:1px solid var(--linea);background:#e9e9e9}
.mapa img{width:100%;aspect-ratio:16/10;object-fit:cover}
.mapa .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);width:46px;height:58px}
.mapa .rotulo{position:absolute;left:50%;top:50%;transform:translate(-50%,10px);background:var(--marino);color:#fff;font:700 13px/1 var(--f-texto);padding:8px 11px;white-space:nowrap}
.mapa small{position:absolute;right:6px;bottom:4px;font-size:11px;color:#555;background:rgba(255,255,255,.8);padding:1px 5px}
.direccion{margin-top:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}