/* ============================================================= El Niño — estilos que solo usa la portada ------------------------------------------------------------- OJO CON LAS RUTAS: este archivo vive dentro de assets/, así que un url('hero-poster.jpg') apunta a assets/hero-poster.jpg. Si se escribe url('assets/hero-poster.jpg') el navegador busca en assets/assets/ y no encuentra nada. ------------------------------------------------------------- Lo común (identidad, cabecera, botones, pie) está en base.css. Esto está en un archivo aparte, y no dentro del HTML, para que la política de seguridad del sitio pueda prohibir los estilos escritos dentro de la página. Sin esa prohibición, la CSP protege bastante menos de lo que parece. ============================================================= */ /* ---------- hero ---------- */ .hero{ position:relative;min-height:min(80vh,720px);display:flex;align-items:flex-end;color:#fff; overflow:hidden;isolation:isolate;background:var(--ink); } .hero-media{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0; background:center/cover no-repeat; /* La primera línea es el respaldo: los navegadores que no entienden image-set se quedan con ella y no se enteran de nada. */ background-image:url('hero-poster.jpg'); background-image:image-set(url('hero-poster-768.webp') type('image/webp'), url('hero-poster.jpg') type('image/jpeg')); } @media (min-width:900px){ .hero-media{ background-image:url('hero-poster.jpg'); background-image:image-set(url('hero-poster-1024.webp') type('image/webp'), url('hero-poster.jpg') type('image/jpeg')); } } .hero-media.fade-in{animation:heroIn 1.1s var(--ease) both;} @keyframes heroIn{from{opacity:0;transform:scale(1.04);}to{opacity:1;transform:none;}} /* El velo no es decoración: es lo que garantiza que el texto se lea encima del vídeo. Los porcentajes salen de medir el fotograma más claro de los dos vídeos y, además, de suponer el peor caso posible (un fotograma blanco entero), para que siga cumpliendo si algún día se cambia el vídeo. Cada franja tiene su mínimo: 18 % eyebrow, necesita .64 23 % h1, necesita .48 40 % párrafo, necesita .62 78 % meta, necesita .66 Arriba baja de .42 a .32: la parte alta enseña MÁS vídeo que antes. */ .hero-veil{ position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg, rgba(34,31,29,.32) 0%, rgba(34,31,29,.68) 18%, rgba(34,31,29,.70) 60%, rgba(34,31,29,.80) 80%, rgba(34,31,29,.93) 100%); } .hero-inner{position:relative;z-index:2;padding:96px 24px 64px;max-width:1180px;margin:0 auto;width:100%;} .hero h1{font-size:clamp(2.3rem,5.4vw,4rem);font-weight:800;max-width:15ch;margin:14px 0 18px;line-height:1.05;} /* Sin transparencias: con el texto opaco hace falta menos velo para el mismo contraste, así que se ve más vídeo. */ .hero .eyebrow{color:var(--cream);} .hero p{max-width:52ch;color:#fff;font-size:1.05rem;margin-bottom:32px;} .btn-row{display:flex;gap:12px;flex-wrap:wrap;} .hero-meta{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.85rem;color:rgba(255,255,255,.88);} .hero-meta span{display:inline-flex;align-items:center;gap:7px;} /* ---------- servicios ---------- */ .services{background:var(--cream);} .serv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px;} .serv-card{ background:var(--white);padding:34px 24px;text-align:center;border-radius:var(--r-md); border:1px solid var(--line);box-shadow:var(--sh-1); transition:transform var(--t),box-shadow var(--t); } .serv-card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);} .serv-icon{width:54px;height:54px;border-radius:50%;margin:0 auto 16px;background:linear-gradient(150deg,var(--terracotta),var(--terracotta-deep));display:flex;align-items:center;justify-content:center;font-size:1.45rem;} .serv-card h3{font-size:1.05rem;margin-bottom:8px;font-weight:700;} .serv-card p{color:var(--soft);font-size:.87rem;} .serv-card.events{background:linear-gradient(155deg,var(--ink),var(--charcoal));color:#fff;border-color:transparent;} .serv-card.events p{color:rgba(255,255,255,.76);} .serv-card.events a{display:inline-block;margin-top:14px;font-size:.78rem;font-weight:800;color:var(--terracotta-claro);letter-spacing:.05em;text-transform:uppercase;} /* la tarjeta es oscura */ /* ---------- nosotros ---------- */ .about{background:var(--white);} .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,60px);align-items:center;} .about-text h2{font-size:clamp(1.5rem,2.6vw,1.95rem);margin:12px 0 18px;font-weight:700;} .about-text p{color:var(--soft);margin-bottom:16px;} /* La caja manda sobre el vídeo, no al revés: así no baila nada mientras carga. El vídeo es vertical (360x640) y la caja cuadrada, de modo que 'cover' lo recorta en vez de dejar bandas negras a los lados, que es lo que pasaba antes. */ .about-media{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-3);aspect-ratio:1/1;} .about-media video{width:100%;height:100%;display:block;object-fit:cover;} /* ---------- carta ---------- */ .menu{background:var(--cream);} /* Cuatro columnas fijas, no automáticas. Con auto-fill salían cinco por fila y 16 platos daban 5+5+5+1: el último se quedaba solo ocupando una fila entera. 16 es 4x4 en escritorio y 2x8 en móvil, así que con estas dos medidas no sobra ninguno nunca. grid-auto-rows:1fr iguala TODAS las filas a la más alta, de modo que una etiqueta de tres líneas no descuadra la rejilla. */ /* 12 platos, que es un número cómodo: se divide entre 2, 3, 4 y 6, así que ninguna banda deja una fila coja. hasta 620 px 2 columnas 6 filas de 2 621-1023 px 3 columnas 4 filas de 3 desde 1024 4 columnas 3 filas de 4 Se descartó 6 columnas en escritorio: daría fotos de 146 px a 1024 px de ancho, MÁS PEQUEÑAS que los 182 px que ve un móvil de 412 px. Un portátil enseñando la comida más pequeña que un teléfono no tiene sentido en la web de un bar, donde la foto es el argumento. Columnas fijas y no auto-fill: auto-fill elige el número por su cuenta y es lo que dejaba al último plato solo ocupando el ancho entero. SI CAMBIA EL NÚMERO DE PLATOS hay que revisar estos tres números. */ .menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media (min-width:1024px){ .menu-grid{grid-template-columns:repeat(4,1fr);} /* 3 filas de 4 */ } /* ---- botón de la carta completa ---- Lleva a la carta digital del bar, que vive fuera de esta web. Escondido POR DEFECTO a propósito: solo aparece si configuracion.js trae una dirección de verdad, y entonces el lo marca antes de pintar. Sin JavaScript no hay marca y no hay botón, que es lo que interesa: la carta en fotos sigue estando justo encima, y es mejor no enseñar botón que enseñar uno que lleva a un error. */ .menu-cta{margin-top:28px;text-align:center;} [data-carta-enlace]{display:none;} html[data-carta="si"] [data-carta-enlace]{display:revert;} /* Sin JavaScript no hay data-carta, y el botón se quedaba fuera aunque la dirección estuviera escrita en el propio HTML. Si la lleva, se enseña: es un enlace corriente y no necesita JavaScript para nada. El :has() es lo que distingue «hay carta» de «no hay»; si un navegador no lo entiende, se salta la regla entera y el botón no aparece, que es el lado seguro de equivocarse. */ html:not([data-carta]) [data-carta-enlace]:has(a[href]){display:revert;} /* En columna y con la etiqueta creciendo: así la tarjeta llena su celda entera y no queda hueco blanco debajo de la foto cuando la fila es más alta que ella. */ .dish{background:var(--white);border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform var(--t),box-shadow var(--t);display:flex;flex-direction:column;} .dish:hover{transform:translateY(-5px);box-shadow:var(--sh-2);} .dish picture{display:block;} /* height:auto NO SOBRA. El lleva width="560" height="560" para que el navegador reserve el hueco antes de descargar la foto y no salte el diseño. Pero esos dos atributos fijan las DOS medidas: aquí abajo width:100% pisa la anchura y, sin este height:auto, la altura se quedaba clavada en 560 px. Con las dos fijadas, aspect-ratio se ignora, y las fotos salían 208x560 en escritorio y 374x560 en móvil. */ .dish img{aspect-ratio:1/1;object-fit:cover;width:100%;height:auto;background:var(--cream);} /* Altura FIJA, no elástica. Antes la etiqueta se estiraba para llenar la celda y, aunque las tarjetas medían igual, los nombres de una línea quedaban centrados y los de dos llenaban el bloque: en una misma fila los textos no empezaban a la misma altura y se veía descuadrado. Con altura fija y el texto pegado arriba (flex-start), todos los nombres arrancan en la misma línea, ocupen una o tres. Los 81 px salen de medir el nombre más largo de la carta («Burger de brie y cebolla caramelizada») en la columna más estrecha de esta banda: tres líneas de 1,35 más el relleno. */ .dish-label{height:81px;display:flex;align-items:flex-start;justify-content:center; padding:12px 14px;text-align:center;font-weight:700;font-size:.88rem;line-height:1.35; overflow:hidden;overflow-wrap:break-word;hyphens:auto;} /* ---------- delivery ---------- */ /* El párrafo va en blanco de 16 px: sobre --terracotta daba 3,98. Arrancando el degradado en --terracotta-deep da 5,53. */ .delivery{background:linear-gradient(120deg,var(--terracotta-deep),var(--terracotta-hover));color:#fff;text-align:center;} .delivery h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:14px;font-weight:700;} .delivery p{max-width:52ch;margin:0 auto 28px;opacity:.95;} .glovo-badge{display:inline-flex;align-items:center;gap:14px;background:#fff;color:var(--ink);padding:12px 20px 12px 26px;border-radius:var(--r-pill);font-weight:800;box-shadow:var(--sh-2);} .glovo-badge img{display:block;border-radius:9px;} /* ---------- reseñas (masonry) ---------- */ .reviews{background:var(--white);} .g-mark{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.85rem;color:var(--soft);} .g-mark svg{width:18px;height:18px;} .masonry{columns:3;column-gap:20px;} .review{ break-inside:avoid;background:var(--cream);border:1px solid var(--line); border-radius:var(--r-md);padding:26px 24px;margin-bottom:20px; box-shadow:var(--sh-1);transition:transform var(--t),box-shadow var(--t); } .review:hover{transform:translateY(-4px);box-shadow:var(--sh-2);} .stars{color:#f0a500;letter-spacing:2px;font-size:.95rem;margin-bottom:12px;} .review blockquote{font-size:1rem;line-height:1.7;} .review-author{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);} .avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(150deg,var(--terracotta-deep),var(--terracotta-hover));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;} .review-author .name{font-weight:800;font-size:.92rem;} .review-author .src{font-size:.76rem;color:var(--soft);} .reviews-foot{text-align:center;margin-top:14px;font-size:.82rem;color:var(--soft);} .reviews-foot a{color:var(--terracotta-deep);font-weight:700;border-bottom:1px solid var(--line-warm);} /* ---------- modos de reserva ---------- El modo lo marca la configuración del en el atributo data-modo del , antes de pintar. Cada trozo de la página dice para qué modos vale; si no coincide, no se ve. Sin JavaScript no hay data-modo, y entonces se enseña la versión de teléfono: es la única que siempre es verdad. */ [data-modo-solo]{display:none;} html[data-modo="api"] [data-modo-solo~="api"], html[data-modo="formspree"] [data-modo-solo~="formspree"], html[data-modo="telefono"] [data-modo-solo~="telefono"], html[data-modo="enlace"] [data-modo-solo~="enlace"], html:not([data-modo]) [data-modo-solo~="telefono"]{display:revert;} /* Una excepción, y una sola: el botón que lleva a la página de reservas. Sin JavaScript la página se queda en la versión de teléfono, pero ese botón es un enlace corriente, funciona igual sin JavaScript, y es la única forma de reservar sin llamar. */ html:not([data-modo]) .booking-online{display:revert;} /* ---------- reservas ---------- */ .booking{background:var(--cream);} .booking-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px);align-items:start;} /* Sin formulario queda una sola tarjeta: si la dejáramos a todo lo ancho quedaría desangelada, así que se estrecha y se centra. */ html[data-modo="telefono"] .booking-grid, html[data-modo="enlace"] .booking-grid, html:not([data-modo]) .booking-grid{max-width:620px;margin-inline:auto;} /* El botón que lleva al sistema de reservas va el primero de la tarjeta: sin formulario, es la acción principal. Aquí NO se toca 'display' a propósito —de eso se encargan las reglas de modo de más arriba—, porque ponerlo aquí lo enseñaría también en los modos que sí tienen formulario. */ .booking-online{margin-bottom:22px;} .booking-online .btn{width:100%;} .booking-online .nota{margin:8px 0 0;font-size:.8rem;color:var(--soft);text-align:center;} @media (min-width:901px){ html[data-modo="api"] .booking-grid, html[data-modo="formspree"] .booking-grid{grid-template-columns:1.05fr .95fr;} } .form-card{ background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(26px,3.4vw,40px);box-shadow:var(--sh-3);position:relative; } .form-card h3{font-size:1.5rem;font-weight:700;margin-bottom:6px;} .form-card .lead{color:var(--soft);font-size:.92rem;margin-bottom:26px;} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .field{margin-bottom:16px;} .field label{display:block;font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);margin-bottom:7px;} .field input,.field select,.field textarea{ width:100%;padding:14px 15px;border-radius:var(--r-sm);border:1.5px solid var(--line); background:#fff;font-size:1rem;transition:border-color var(--t-fast),box-shadow var(--t-fast); -webkit-appearance:none;appearance:none; } .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7168' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;} .field textarea{resize:vertical;min-height:76px;} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--terracotta);box-shadow:0 0 0 4px rgba(201,98,47,.13);outline:none;} .field.invalid input,.field.invalid select{border-color:var(--err);} .field-error{display:none;font-size:.8rem;color:var(--err);margin-top:6px;font-weight:700;} .field.invalid .field-error{display:block;} .hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;} .form-legal{font-size:.76rem;color:var(--soft);margin-top:14px;text-align:center;line-height:1.5;} .form-legal a{color:var(--terracotta-deep);font-weight:700;} /* Las estrellas se quedan en dorado vivo a propósito: dan 1,91 sobre crema, pero son un gráfico con su texto alternativo ("5 de 5 estrellas"), así que la información no se pierde para nadie. Oscurecerlas a #ba8208 cumpliría el 3,0 y las convertiría en mostaza, estropeando lo único que aporta la sección. */ /* estado del envío */ .status{margin-top:20px;border-radius:var(--r-md);padding:20px 22px;display:none;border:1px solid var(--line);background:var(--cream);} .status.show{display:block;animation:rise .35s var(--ease) both;} @keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} .status h4{font-family:'Playfair Display',serif;font-size:1.2rem;margin-bottom:6px;} .status p{font-size:.92rem;color:var(--soft);} .status .status-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;} .status .btn{padding:12px 22px;font-size:.84rem;} .status.is-ok{border-color:rgba(47,125,79,.35);background:rgba(47,125,79,.07);} .status.is-ok h4{color:var(--ok);} .status.is-warn{border-color:var(--line-warm);background:rgba(201,98,47,.07);} .status.is-warn h4{color:var(--warn);} .status.is-err{border-color:rgba(163,32,32,.3);background:rgba(163,32,32,.06);} .status.is-err h4{color:var(--err);} /* la "comanda": ticket de confirmación */ .ticket{ margin-top:16px;background:#fff;border:1px dashed rgba(34,31,29,.28);border-radius:var(--r-sm); /* Monoespaciada del sistema: era una tipografía entera descargada para un solo recuadro de confirmación. */ padding:18px 20px;font-size:.85rem; font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace; } .ticket .code{font-size:1.35rem;font-weight:700;letter-spacing:.14em;display:block;margin-bottom:10px;color:var(--ink);} .ticket dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;} .ticket dt{color:var(--soft);} .ticket dd{font-weight:700;} .alt-slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;} .slot{ background:#fff;border:1.5px solid var(--line-warm);border-radius:var(--r-pill); padding:9px 18px;font-weight:800;font-size:.88rem;cursor:pointer; transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast); } .slot:hover{background:var(--terracotta);color:#fff;border-color:var(--terracotta);transform:translateY(-1px);} .spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;} @keyframes spin{to{transform:rotate(1turn);}} /* panel lateral */ .info-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);box-shadow:var(--sh-1);} .info-card h3{font-size:1.25rem;font-weight:700;margin-bottom:20px;} .contact-item{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;} .contact-icon{width:44px;height:44px;border-radius:50%;background:var(--cream);border:1px solid var(--line-warm);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem;} .contact-item .label{font-size:.73rem;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);font-weight:700;} .contact-item .value{font-size:.98rem;font-weight:700;} .contact-item .value a:hover{color:var(--terracotta);} .call-note{background:var(--cream);border:1px solid var(--line-warm);border-radius:var(--r-md);padding:18px 20px;margin-top:6px;} .call-note p{font-size:.86rem;color:var(--soft);margin-bottom:14px;} .call-actions{display:flex;gap:10px;flex-wrap:wrap;} .call-actions .btn{padding:13px 22px;font-size:.85rem;flex:1 1 150px;} /* ---------- mapa bajo demanda ---------- La caja mide lo mismo vacía que con el mapa dentro (280 px), así que al cargarlo no se mueve nada de lo que hay alrededor. */ .map-embed{margin-top:22px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);height:280px;background:var(--cream);} .map-embed iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.9);} .map-load{ width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:6px;text-align:center;padding:22px;background:var(--cream);color:var(--ink); transition:background var(--t); } .map-load:hover{background:rgba(201,98,47,.07);} .map-load .ml-icon{font-size:1.8rem;line-height:1;} .map-load .ml-txt{font-weight:800;font-size:.95rem;} .map-load .ml-sub{font-size:.79rem;color:var(--soft);max-width:36ch;line-height:1.5;font-weight:400;} .map-foot{margin-top:10px;font-size:.8rem;color:var(--soft);text-align:center;} .map-foot a{color:var(--terracotta-deep);font-weight:700;border-bottom:1px solid var(--line-warm);} /* ---------- redes ---------- */ .socials{background:var(--charcoal);color:#fff;text-align:center;} .socials h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:22px;font-weight:700;} .social-row{display:flex;gap:18px;justify-content:center;} .social-btn{width:54px;height:54px;transition:transform var(--t);} .social-btn svg{width:100%;height:100%;border-radius:14px;} .social-btn:hover{transform:translateY(-4px);} /* ---------- responsive ---------- */ @media (max-width:1040px){ .masonry{columns:2;} } @media (max-width:900px){ .about-grid{grid-template-columns:1fr;} .hero{min-height:auto;} .hero-inner{padding:72px 24px 52px;} } @media (max-width:620px){ .masonry{columns:1;} .field-row{grid-template-columns:1fr;gap:0;} .btn-row .btn{width:100%;} /* Dos columnas en móvil, no una. A una columna cada plato ocupaba la pantalla entera y había que hacer dieciséis scrolls para ver la carta; a dos se ven cuatro de golpe y se recorre en cuatro. Es como se miran las cartas en el móvil. */ .menu-grid{grid-template-columns:repeat(2,1fr);gap:12px;} /* Fuente más pequeña y, por tanto, altura menor para las mismas tres líneas del peor caso a 320 px. */ .dish-label{height:71px;padding:10px 8px;font-size:.78rem;} } /* Tres reglas que antes iban como style="..." dentro del HTML. Se sacaron aquí por lo mismo: para no tener que permitir estilos en línea en la política de seguridad. */ .etiqueta-suave{text-transform:none;letter-spacing:0;font-weight:400;} .valor-suave{font-weight:400;color:var(--soft);font-size:.9rem;} .status-sinjs{display:block;}