/* ==========================================================================
offer-desktop.css — Desktop overrides (min-width breakpoints)
Extracted from offer.css for mobile-first organization.
========================================================================== */
@media screen and (min-width: 1281px) {
.iframecontent {
position: absolute !important;
top: 55px !important;
bottom: 0 !important;
left: 290px !important;
display: block !important;
width: calc(100vw - 290px) !important;
height: calc(100vh - 55px) !important;
padding: 0px;
margin: 0px;
overflow: hidden
}
.iframeoffer {
width: inherit !important;
height: inherit !important;
overflow: hidden;
border: 0
}
}
/* ==========================================================================
DESKTOP: PANTALLA DIVIDIDA 50/50 (Solo para pantallas > 992px)
========================================================================== */
@media (min-width: 992px) {
div#tabs-mobile {
margin-top: 37px;
margin-bottom: 23px;
}
/* 1. EL CONTENEDOR PADRE (La Cuadrícula) */
.main-container-app {
display: grid !important;
/* 1fr 1fr significa "1 fracción y 1 fracción" -> 50% y 50% exactos */
grid-template-columns: 1fr 1fr !important;
gap: 64px !important; /* Espacio enorme y lujoso entre foto y texto */
align-items: start !important; /* Todo empieza alineado desde arriba */
max-width: 1140px !important; /* Un ancho máximo muy elegante */
padding: 0 0px !important;
margin: 20px auto !important;
}
/* 2. COLUMNA IZQUIERDA: La Gran Imagen */
.template9-headerimage {
/* TRUCO PREMIUM: La imagen te persigue al hacer scroll */
position: sticky !important;
top: 100px !important; /* Se frena a 100px del techo al bajar */
right: 20px !important;
order: 1 !important; /* Asegura que siempre esté a la IZQUIERDA (Columna 1) */
width: 100% !important;
min-height: 500px !important;
border-radius: var(--radius-lg) !important; /* Curva de cristal */
box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.15) !important;
/* height: 65vh !important; */ /* Ocupa el 65% del alto de la pantalla */
}
/* 3. COLUMNA DERECHA: Contenido y Textos */
.ht-offer-main-maincontent { /* (He corregido el nombre de tu clase ffer-main-content) */
order: 2 !important; /* Asegura que siempre esté a la DERECHA (Columna 2) */
width: 100% !important;
padding-bottom: 64px !important; /* Aire al final para que respire */
}
/* Aseguramos que los elementos dentro del contenido no hagan cosas raras */
.ht-offer-maincontent > * {
max-width: 100% !important;
}
.offer_play_media {
position: absolute;
top: auto;
bottom: 19px;
left: 21px;
}
}
/* ==========================================================================
DESKTOP: PULIDO FINAL (Líneas extra y agrupación de botones)
========================================================================== */
@media (min-width: 992px) {
/* 1. FULMINAR LÍNEAS EXTRA EN EL TEXTO */
/* Ocultamos cualquier etiqueta
que el editor haya metido a traición */
#column-text-content hr {
display: none !important;
}
/* Si el editor metió párrafos vacíos que están generando espacio o líneas, los matamos */
#column-text-content p:empty {
display: none !important;
}
/* Aseguramos que nuestro titular elegante ("HORARIO DE TARDE") solo tenga UNA línea abajo */
#column-text-content span[style*="text-decoration: underline"],
#column-text-content span strong,
#column-text-content strong,
#column-text-content u {
margin-bottom: 24px !important; /* Más aire abajo antes de "19:00 - 1er turno" */
border-bottom: 1px solid var(--color-border-strong) !important; /* Línea gris muy sutil */
/* Evitamos que otros elementos hermanos hereden el borde por error */
}
/* 2. AGRUPAR LOS BOTONES DEL NOTCH EN EL CENTRO */
.ht-action-bar {
gap: 12px !important; /* Espacio uniforme entre TODOS los botones */
/* En lugar de 'space-between' que los manda a los bordes, usamos 'center' */
justify-content: center !important;
padding: 12px 32px 16px 32px !important; /* Un poco menos alto para que sea más fino */
}
/* Si hay grupos interiores (tabs-group y actions-group), quitamos cualquier margen automático
que los esté empujando hacia los lados */
.ht-tabs-group,
.ht-actions-group {
flex: 0 1 auto !important; /* Que ocupen solo lo que necesiten */
margin: 0 !important;
}
}
/* ==========================================================================
DESKTOP: CORRECCIÓN DEFINITIVA DE LA COLUMNA IZQUIERDA
========================================================================== */
@media (min-width: 992px) {
/* 1. EL LOGO: Tamaño Elegante y Alineación Izquierda */
.page-column-logo {
display: block !important;
max-width: 200px !important; /* Lo hacemos MÁS PEQUEÑO para que respire */
margin-right: auto !important; /* Forzamos la alineación a la izquierda */
margin-bottom: 32px !important; /* Espacio antes del texto */
margin-left: 0 !important;
}
/* 2. MATAR EL SUBTÍTULO REDUNDANTE (La línea con texto centrado) */
.content-section-header {
display: none !important; /* Esto es crucial para limpiar la vista */
}
/* 3. ALINEAR TODOS LOS TEXTOS A LA IZQUIERDA */
#column-text-content {
margin-bottom: 48px !important; /* Separación con la tarjeta blanca de abajo */
}
#column-text-content p,
#column-text-content span,
#column-text-content div {
font-size: 1.05rem !important;
line-height: 1.7 !important;
color: var(--color-text-body) !important; /* Gris pizarra suave */
text-align: left !important; /* Machacamos cualquier del HTML */
}
/* 4. TRANSFORMAR EL "HORARIO de tarde" EN UN TITULAR ELEGANTE */
/* Buscamos específicamente textos subrayados o en negrita dentro del contenido */
#column-text-content span[style*="text-decoration: underline"],
#column-text-content span strong,
#column-text-content strong,
#column-text-content u {
display: block !important;
width: 100% !important; /* Que la línea llegue hasta el final de la columna */
padding-bottom: 8px !important;
margin-top: 32px !important; /* Mucho aire por arriba */
margin-bottom: 16px !important;
font-size: 0.85rem !important;
font-weight: 800 !important;
color: var(--color-text-heading) !important; /* Casi negro */
text-transform: uppercase !important; /* Lo pasamos a MAYÚSCULAS */
letter-spacing: 1.5px !important;
text-decoration: none !important; /* Adiós al subrayado de HTML antiguo */
border-bottom: 1px solid var(--color-border) !important; /* Una fina línea divisoria muy elegante */
}
/* Ocultar las líneas horizontales
que mete el editor de texto */
#column-text-content hr {
display: none !important;
}
}
/* Ajuste en la botonera (Efecto Notch) */
@media (min-width: 992px) {
.ht-action-bar-wrapper {
/* En lugar de center, podemos probar a alinear al inicio (flex-start) o mantenerlo centrado pero agrupado */
justify-content: center !important;
}
.ht-action-bar {
gap: 16px !important; /* Un gap constante entre la pestaña activa y los botones grises */
/* Aseguramos que no haya un "margin: auto" empujando los botones hacia los lados */
justify-content: center !important;
}
/* Si tenías un margin: auto o similar en el ht-actions-group, quítalo */
.ht-actions-group {
display: flex;
margin-left: 0 !important;
}
}
/* ==========================================================================
DESKTOP: ACTION BAR EFECTO "NOTCH" (Colgando del Header)
========================================================================== */
@media (min-width: 992px) {
/* 1. Posicionamiento del Contenedor */
.ht-action-bar-wrapper {
/* Opcional: Si quieres que el notch te persiga al bajar por la página */
position: sticky !important;
top: 28px !important; /* Ajusta esto a lo que mida tu barra oscura */
display: block !important;
justify-content: center !important;
width: 100% !important;
padding: 0 !important;
margin: 0 auto 52px auto !important; /* Espacio debajo del notch */
/* z-index: 40 !important; */
}
/* 2. LA MAGIA DEL NOTCH (Forma geométrica y sombras) */
.ht-action-bar {
display: flex !important;
flex-wrap: nowrap !important;
gap: 6px !important;
align-items: center !important;
justify-content: center !important;
/* Relleno asimétrico: Más aire abajo para la curva */
padding: 16px 22px 10px 22px !important;
background-color: var(--color-text-inverse) !important;
border: 1px solid var(--color-border) !important;
border-top: none !important; /* Sin borde arriba para que no haya corte */
/* AQUÍ ESTÁ EL TRUCO: Arriba recto (0), abajo súper curvo (32px) */
border-radius: 0 0 32px 32px !important;
box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.15) !important;
/* EL "ANCLAJE": Subimos el notch un poco para que se esconda
debajo de tu barra oscura superior (ajusta los -15px si es necesario) */
transform: translateY(-15px) !important;
}
/* 3. Estilo de los Botones Interiores (Minimalistas) */
.ht-tab-btn,
.ht-action-btn {
padding: 8px 20px !important;
font-size: 0.75rem !important;
font-weight: 800 !important;
color: var(--color-text-body) !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
background: var(--color-bg-subtle) !important;
border: none !important;
border-radius: var(--radius-pill) !important; /* Forma de pastillita */
box-shadow: none !important;
transition: var(--transition-fast) !important;
}
/* Botón Activo (SAKURA TEPPANYAKI) */
.ht-tab-btn.active {
color: var(--color-text-inverse) !important;
background-color: var(--color-text-heading) !important; /* Oscuro para enlazar visualmente con el header */
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2) !important;
}
/* Hover en los botones secundarios (Carta, Valorar, Buffet) */
.ht-tab-btn:not(.active):hover,
.ht-action-btn:not(.ht-btn-primary):hover {
color: var(--color-text-heading) !important;
background-color: var(--color-bg-subtle) !important;
}
/* Botón de Llamada a la Acción (Reservar) */
.ht-action-btn.ht-btn-primary {
color: var(--color-text-inverse) !important;
background-color: var(--color-success) !important; /* Esmeralda */
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}
.ht-tabs-group, .ht-actions-group {
flex: 0 1 auto !important;
flex-direction: row-reverse;
gap: 12px;
width: 100%;
margin: 0 !important;
}
.ht-offer-maincontent {
padding: 0 15px;
}
.offer_location_button {
top: auto;
bottom: 18px !important;
left: 80px;
}
}