/* -----------------------
   Reset básico y tipografía
-------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

/* CAMBIO CLAVE: serif como fuente principal */
body {
  font-family: 'Cormorant Garamond', 'EB Garamond', 'Georgia', serif;
  color: #ffffff;
  background-color: #000000;
  font-weight: 300;  /* ligera  */
}

/* Menú sigue sans-serif (legible) */
.main-nav, .top-bar, .hero-bottom {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-weight: 400;
}

/* Párrafos y timeline texto también serif */
p, .timeline-body p, .block-text {
  font-family: 'Cormorant Garamond', serif;
}

/* Títulos más pesados */
.timeline-year, h1, h2, .timeline-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
}

/* -----------------------
   Barra superior (navbar)
-------------------------- */

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  background: transparent;    /* sin barra opaca */
  backdrop-filter: none;      /* sin desenfoque */
  transition: background 0.25s ease;
}

/* Solo en páginas interiores: comportamiento scrolled */
.page-cicciolina .top-bar.scrolled,
.page-restaurant .top-bar.scrolled,
.page-cafe .top-bar.scrolled,
.page-picnics .top-bar.scrolled,
.page-contact .top-bar.scrolled {
  background: rgba(60, 10, 20, 0.8);  /* define el color de la barra */
}

.top-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: flex-start;  /* sin "center" el contenido ya no queda centrado verticalmente */
  justify-content: space-between;
}

.logo img {
  height: 75px;  /* o 48px, 56px, 70px: ajusta al gusto el tamaño del logo */
  display: block;
}

/* Menú escritorio */

.main-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.95rem;      /* antes 0.9rem tamaño menu */
  text-transform: uppercase;
  letter-spacing: 0.14em;
    margin-top: 24px;       /* ajusta este valor hasta que quede alineado */
}

.main-nav a {
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.main-nav a:hover {
  opacity: 0.7;
}

/* Botón Reservas */

.btn-reservas {
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  background: #b1181b;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-weight: 600;
}


.btn-reservas:hover {
  background: rgba(177, 24, 27, 0.85);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

/* -----------------------
   Dropdown de idioma (ES / ENG)
-------------------------- 

.lang-dropdown {
  position: relative;
}

.lang-toggle {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.lang-toggle i {
  font-size: 0.6rem;
}

.lang-menu {
  position: absolute;
  top: 130%;
  right: 0;
  background: rgba(0, 0, 0, 0.95);
  padding: 0.45rem 0.8rem;
  border-radius: 4px;
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.8rem;
  min-width: 90px;
}

.lang-menu a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.lang-menu a:hover {
  opacity: 0.8;
}

.lang-menu.open {
  display: flex;
}

 */

/* -----------------------
   Menú móvil (hamburguesa)
-------------------------- */

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px 0;
  background: #ffffff;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* menú móvil desplegable */

.mobile-nav {
  display: none;
  position: fixed;
  top: 70px;                         /* antes 56 altura del a barra */
  left: 0;
  right: 0;
  background: rgba(60, 10, 20, 0.9); /* vino oscuro semitransparente */
  z-index: 15;
  padding: 1.2rem 1.5rem 1.8rem;
  flex-direction: column;
  gap: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
}

.mobile-nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.9rem;                        /* mismo tamaño que desktop o un poco menos si quieres */
  font-family: "Source Sans 3", sans-serif; /* misma fuente */
  text-transform: uppercase;                /* mayúsculas*/
  letter-spacing: 0.14em;  					/* ← UNIFICO con .main-nav (0.14em) */
}

.mobile-nav .btn-reservas {
  align-self: flex-start;
}

.lang-mobile {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.8rem;
}

.lang-mobile .lang-label {
  opacity: 0.7;
}

/* MÓVIL: logo responsive */
@media (max-width: 768px) {
  .logo img {
    height: 50px;
  }
}

/* -----------------------
   Hero y slider
-------------------------- */

.hero {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* separa visualmente el contenido del header fijo */
.hero-slider {
  height: 100%;
  width: 100%;
  position: relative;
}

/* cada slide es una imagen de fondo */
.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;  /*  Velocidad 1,2 */
}

.slide.active {
  opacity: 1;
}

/* texto oculto */
.hero-title-hidden {
  position: absolute;
  left: -9999px; /* Off-screen, invisible pero accesible */
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hero-title-hidden h1 {
  font-size: 2rem; /* Tamaño natural, solo para screen readers */
  margin: 0;
}




/* -----------------------
   Footer interno (línea + redes + nombre)
-------------------------- */

.hero-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.5rem;
  padding: 0 1.5rem;
}

.hero-line {
  margin: 0 auto 0.75rem auto;
  width: 90%;
  max-width: 1100px;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}

.hero-bottom {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  text-transform: capitalize; /* uppercase */
  letter-spacing: 0.12em;
}

/* Redes sociales */

.hero-social {
  display: flex;
  gap: 0.7rem;
}

.hero-social a {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.85;
  font-size: 0.95rem;
}

.hero-social a:hover {
  opacity: 1;
}

/* Nombre del negocio */

.hero-name {
  text-align: right;
  opacity: 0.9;
}

/* -----------------------
   Responsivo
-------------------------- */

@media (max-width: 992px) {
  /* Oculta menú escritorio, muestra hamburguesa */
  .main-nav {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  .mobile-nav.open {
    display: flex;
  }

  .hero-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .hero-name {
    text-align: left;
  }
}

@media (max-width: 576px) {
  .top-bar-inner {
    padding-inline: 1rem;
  }

  .hero-footer {
    padding-inline: 1rem;
    bottom: 1rem;
  }

  .hero-line {
    width: 92%;
  }

  .hero-bottom {
    font-size: 0.72rem;
  }
}



/* -----------------------
   Página Cicciolina: 
   fondo y tipografía
-------------------------- */

body.page-cicciolina {
  /* font-family: "EB Garamond", "Times New Roman", serif;  */
  /* asi se mantiene el sans serif en el menu  */
  color: #ffffff;
  background-color: #2b1113;
  background-image: url("imgs/textura.jpg"); /* tu textura */
  background-size: cover;
  background-attachment: fixed;
}

/* Mantener el header transparente sobre el fondo */

.page-cicciolina .top-bar {
  background: transparent;
  backdrop-filter: none;
}

/* Enlace activo en el menú */

.main-nav a {
  position: relative;

}

.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 50%;
  max-width: 60px;
  height: 2px;
  background: #b1181b;
  transform: translateX(-50%);
}

/* Contenido principal Cicciolina */

.cicciolina-main {
  font-family: "EB Garamond", "Times New Roman", serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 150px 1.5rem 80px;  /* separación del menu */
}


/* Bloque intro más grande */

.section-intro {
  margin-bottom: 80px;
}

.intro-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}

.intro-image img {
  width: 100%;
  display: block;
}

.intro-text h1 {
  font-size: 2.4rem;
  color: #e3c7aa;
  margin-bottom: 1rem;
}

.intro-text p {
  font-size: 1.2rem;   /* tx más grande que el resto */
  line-height: 1.8;
}

/* Bloques alternados */

.section-block {
  margin-bottom: 70px;
  
}

.block-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 60px;
  align-items: center;
}

.section-block.alt-right .block-inner {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.block-image img {
  width: 100%;
  display: block;
}

.block-text h2 {
  font-size: 1.6rem;
  margin-bottom: 0.6rem;
  color: #ffffff;
}

.block-text p {
  font-size: 1.05rem;  /* 0.98 tamaño normal para los otros bloques */
  line-height: 1.7;
}

/* transparencia alrededor foto*/
.storys-image-frame {
  display: inline-block;
  padding: 70px;           /* aire alrededor */
  background: transparent; /* rgba(0, 0, 0, 0.45); “marco” oscuro o crema, según diseño */
  border: none;			   /* 1px solid rgba(227, 199, 170, 0.4); línea fina opcional */
  box-shadow: none;		   /* 0 10px 30px rgba(0, 0, 0, 0.55); sombra suave como flotando */
}

.storys-image-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
 /* ESPECÍFICAS PARA CADA LADO - ORDEN CORREGIDO */
.section-block.alt-left .storys-image-frame {
  padding: 70px 40px 70px 90px;
}

.section-block.alt-right .storys-image-frame {
  padding: 70px 90px 70px 40px;
}

/* Footer reutilizado */

.hero-footer-inner {
  position: relative;
  margin-top: 40px;
  padding-bottom: 20px;
}

/* Responsivo */

@media (max-width: 768px) {
  .intro-inner,
  .block-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .section-block.alt-right .block-inner {
    grid-template-columns: 1fr;
  }
  
  /* FORZAR CERO padding EN TODOS los casos */
  .storys-image-frame,
  .section-block.alt-left .storys-image-frame,
  .section-block.alt-right .storys-image-frame {
    padding: 0 !important;  /* ← AÑADE ESTAS 2 LÍNEAS */
      /* 
    padding: 5px;     muy poco aire = foto más grande
    width: 98vw;     ocupa casi toda la pantalla 
    margin: 0 auto;    centra 
    */
  }
  
  /* NUEVO: fuerza tamaño de imagen */
  .storys-image-frame img {
    /* min-width: 280px;  foto más grande en móvil esto origino desborde */
    width: 100%;
    height: auto;
    object-fit: cover;
  } 

  .cicciolina-main {
    padding-top: 100px;
  }
}


/* Carrusel Time line */

.section-timeline {
  margin: 80px 0 40px;
}

.timeline-title {
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
  color: #e3c7aa;
}

/* contenedor general con flechas */
.timeline-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* botones izquierda / derecha */
.timeline-arrow {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}

.timeline-arrow:hover {
  background: #b1181b;
  border-color: #b1181b;
}

/* área desplazable */
.timeline-scroll {
  overflow-x: auto;
  padding-bottom: 0.75rem;
  flex: 1;
}

/* barra de scroll discreta (solo WebKit) */
.timeline-scroll::-webkit-scrollbar {
  height: 4px;
}
.timeline-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.4);
}
.timeline-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
}

/* banda horizontal de sucesos */
.timeline-track {
  position: relative;
  display: flex;
  gap: 80px; /* espacio entre sucesos */
  padding: 0 10px 24px;
}


/* cada suceso */
.timeline-item {
  min-width: 260px;      /* controla cuántos entran en pantalla */
  position: relative;
}

/* año grande arriba */
.timeline-year {
  font-size: 2.2rem; /* tamaño era 2.4 */
  margin-bottom: 1rem;
}

/* imagen + texto */
.timeline-body {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 24px;
}

.timeline-body img {
  width: 96px;   /* ancho img pantalla antes 90 */
  height: 96px;  /* alto img pantalla antes 90 */
  object-fit: cover;
  flex-shrink: 0;
}

.timeline-body p {
  font-size: 0.95rem; /* tamaño antes 0.9 */
  line-height: 1.6;
}

/* punto sobre la línea */
.timeline-dot {
  position: absolute;
  bottom: -7px;      /* justo encima de la línea base */
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: #b1181b;
  transform: translateX(0); /* puedes ajustar para centrarlo más */
}

/* responsive */
@media (max-width: 768px) {
  .timeline-track {
    gap: 40px;
  }

  .timeline-item {
    min-width: 220px;
  }

  .timeline-year {
    font-size: 1.8rem;
  }

  .timeline-body {
    flex-direction: column;
    align-items: flex-start;
  }

  .timeline-body img {
    width: 80px;
    height: 80px;
  }
  
  .timeline-body p {
    font-size: 0.9rem;
  }
}



/* Efectos. Estado inicial: oculto y un poco abajo */
.reveal {
  opacity: 0;
  transform: translateY(40px); /* desplazamiento */
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Cuando ya se mostró */
.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}



/* Restaurant configuracion */


/* Fondo más oscuro para Restaurant */
body.page-restaurant {
  background-color: #19080a;
  background-image: url("imgs/textura-oscura.jpg"); /* opcional */
  background-size: cover;
}

/* Contenedor principal */
.restaurant-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 140px 1.5rem 80px;
  font-family: "EB Garamond", "Times New Roman", serif;
}

/* Logo centrado solo */
.rest-logo-section {
  text-align: center;
  margin-bottom: 40px;
}

.rest-logo {
  max-width: 240px;
  height: auto;
}

/* Bloque 1: imagen horizontal + texto a la derecha */
.rest-block-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin-bottom: 70px;
}

.rest-top-image img {
  width: 100%;
  display: block;
}

.rest-top-text p {
  font-size: 1.06rem;
  line-height: 1.7;
}

/* Bloque 2: ficha sobre imagen vertical + imagen horizontal */
.rest-block-info {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: stretch;
  margin-bottom: 70px;
}

/* Columna izquierda: imagen de fondo */
.rest-info-left {
  position: relative;
}

.rest-info-bg {
  position: relative;
  /* min-height: 380px; */
  aspect-ratio: 3 / 4;    /* relación vertical (ajusta 3/4, 2/3, etc.) */
  background-size: cover;
  background-position: center;
}



/* Ficha técnica */
.rest-info-card {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 10%;
  padding: 1.8rem 2rem;        /* ← +30% más padding (1.4→1.8, 1.6→2) */
  background: rgba(0, 0, 0, 0.50); /* ← corregido */
  color: #ffffff;              /* ← añadido correctamente */
  font-size: 1.15rem;          /* ← +20% (0.96→1.15rem) */
  line-height: 1.7;            /* ← +20% más legible (1.6→1.7) */
}

.rest-info-card h2 {
  font-size: 1.25rem;          /* ← +20% (0.96→1.35rem) */
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: 0.4rem;
  margin-bottom: 0.15rem;
  color: #f5e8d3			 /* crema */
}

.rest-info-card p {
  margin-bottom: 0.5rem;       /* ← +25% más espacio */
  font-size: 1.1rem;           /* ← explícito para párrafos */
}

/* Links de la ficha: color crema, sin azul */

.rest-info-card a {
  color: #e3c7aa;
  text-decoration: none;
  border-bottom: 1px solid rgba(227, 199, 170, 0.6);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.rest-icon-wa {
  font-size: 1rem;
  color: #25d366;              /* verde WhatsApp */
}



.rest-info-card a:hover {
  opacity: 0.8;
}

/* Columna derecha: imagen horizontal */
.rest-info-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bloque 3: tres imágenes verticales */
.rest-block-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 60px;
}

.rest-gallery-col img {
  width: 100%;
  display: block;
}

/* Logo de firma abajo a la derecha */
.rest-award {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 40px;
}

.rest-award img {
  max-width: 280px;  /* tamaño award */
  height: auto;
  opacity: 0.9;
}

/* Responsivo */
@media (max-width: 992px) {
  .rest-block-top,
  .rest-block-info {
    grid-template-columns: 1fr;
  }

  .rest-info-card {
    left: 8%;
    right: 8%;
  }
}

@media (max-width: 768px) {
  .restaurant-main {
    padding-top: 120px;
  }

  .rest-block-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 576px) {
  .rest-block-gallery {
    grid-template-columns: 1fr;
  }

  .rest-info-card {
    left: 6%;
    right: 6%;
    bottom: 8%;
  }
}




/* Cafe configuracion */


body.page-cafe {
  background-color: #1d0d0c;
  background-image: url("imgs/textura-oscura.jpg");
  background-size: cover;
}


/* Picnics configuracion */


body.page-picnics {
  background-color: #181008;
  background-image: url("imgs/textura-oscura.jpg");
  background-size: cover;
}

.page-picnics .rest-award { display: none; } /* Elimina awards de picnics */



/* Configuracion pagina de contacto */

/* Fondo para contacto */
body.page-contact {
  background-color: #19080a;
  background-image: url("imgs/textura-oscura.jpg");
  background-size: cover;
}

/* Contenedor principal */
.contact-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 140px 1.5rem 80px;
  font-family: "EB Garamond", "Times New Roman", serif;
}

/* Cabecera */
.contact-header {
  text-align: center;
  margin-bottom: 50px;
}

.contact-header h1 {
  font-size: 2.1rem;
  margin-bottom: 0.5rem;
  color: #e3c7aa;
}

.contact-header p {
  font-size: 1.02rem;
  line-height: 1.7;
}

/* Bloque principal: imagen + columnas */
.contact-content {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr);
  gap: 50px;
  align-items: flex-start;
}

.contact-image img {
  width: 100%;
  display: block;
}

/* Columnas de contacto: 2 arriba, Picnics ocupa toda la fila debajo */
.contact-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.contact-card--full {
  grid-column: 1 / -1;
}

/* Tarjetas de contacto */
.contact-card h2 {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 0.6rem;
  color: #e3c7aa;
}

.contact-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0.25rem;
}

/* Enlaces e iconos: color crema, sin subrayado */
.contact-card a {
  color: #e3c7aa;
  text-decoration: none;
  border-bottom: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.95rem;
}

.contact-card a:hover {
  opacity: 0.8;
}

.contact-card i {
  font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 992px) {
  .contact-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .contact-columns {
    grid-template-columns: 1fr;
  }

  .contact-main {
    padding-top: 120px;
  }
}


.btn-reservas-small {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #e3c7aa;
  color: #19080a !important;
  padding: 0.5rem 1rem;
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 0;
  transition: all 0.3s ease;
}

.btn-reservas-small:hover {
  background: transparent;
  color: #e3c7aa !important;
  border: 1px solid #e3c7aa;
}


/* Bloque musica 
.music-player {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
}

.music-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #e3c7aa;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.music-btn.active {
  background: #b1181b;
  border-color: #b1181b;
  color: #fff;
}

*/