:root{
    --amarillo:#F5C518;
    --amarillo-suave:#FFDD57;
    --madera:#1A1A1A;
    --madera-clara:#242424;
    --carbon:#0A0A0A;
    --crema:#F5F5F5;
    --texto-claro:#F5F5F5;
    --texto-suave:#B0B0B0;
    --sombra:rgba(0,0,0,.6);
    --radio:14px;
    --fuente-display:'Anton', 'Oswald', sans-serif;
    --fuente-texto:'Nunito', 'Segoe UI', sans-serif;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--fuente-texto);
    background:var(--carbon);
    color:var(--texto-claro);
    line-height:1.6;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  section{position:relative; padding:80px 20px;}
  .contenedor{max-width:1100px; margin:0 auto;}
  h1,h2,h3,h4{font-family:var(--fuente-display); letter-spacing:.5px; text-transform:uppercase;}

  .franja-senyera{
    height:10px;
    background:repeating-linear-gradient(
      90deg,
      var(--amarillo) 0 40px,
      var(--carbon) 40px 80px
    );
  }

  /* ---------- Reveal on scroll (progressive enhancement) ---------- */
  .reveal-init{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}
  .reveal-visible{opacity:1 !important; transform:none !important;}

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:100;
    background:linear-gradient(180deg, rgba(24,20,16,.97), rgba(24,20,16,.9));
    border-bottom:3px solid var(--amarillo);
    backdrop-filter:blur(4px);
  }
  .nav-wrap{
    max-width:1200px; margin:0 auto; padding:12px 20px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
  }
  .marca{display:flex; align-items:center; gap:12px;}
  .escudo{width:54px; height:54px; flex-shrink:0; border-radius:50%; object-fit:cover;}
  .marca-texto h1{font-size:1.35rem; color:var(--amarillo); line-height:1;}
  .marca-texto span{font-size:.72rem; color:var(--texto-suave); text-transform:uppercase; letter-spacing:1px;}

  nav ul{display:flex; gap:22px; flex-wrap:wrap;}
  nav a{
    font-family:var(--fuente-display); font-size:.85rem; letter-spacing:1px;
    color:var(--texto-claro); text-transform:uppercase; position:relative; padding:4px 2px;
  }
  nav a::after{
    content:''; position:absolute; left:0; bottom:-4px; width:0; height:3px;
    background:var(--amarillo); transition:width .25s ease;
  }
  nav a:hover::after{width:100%;}
  nav a.activo{color:var(--amarillo);}
  nav a.activo::after{width:100%;}

  .btn-menu-movil{
    display:none; background:none; border:2px solid var(--amarillo); color:var(--amarillo);
    font-size:1.4rem; width:42px; height:42px; border-radius:8px; cursor:pointer;
  }

  @media(max-width:820px){
    nav{
      position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
      background:var(--madera); padding:100px 30px 30px;
      box-shadow:-8px 0 24px var(--sombra);
      /* cerrado: invisible pero dentro de la pantalla, para que la página no se ensanche */
      opacity:0; visibility:hidden; transform:translateY(-12px);
      transition:opacity .25s ease, transform .25s ease, visibility .25s;
    }
    nav.abierto{opacity:1; visibility:visible; transform:none;}
    nav ul{flex-direction:column; gap:26px;}
    .btn-menu-movil{display:block;}
  }

  /* ---------- Hero ---------- */
  .hero{
    min-height:92vh; display:flex; align-items:center; justify-content:center; text-align:center;
    position:relative; padding:140px 20px 100px;
    background-image:
      linear-gradient(180deg, rgba(18,15,11,.55) 0%, rgba(18,15,11,.78) 60%, var(--carbon) 100%),
      url('assets/img/hero-campo.jpg');
    background-position:center;
    background-size:cover;
    background-attachment:fixed;
  }
  .hero-contenido{max-width:760px;}
  .hero-etiqueta{
    display:inline-block; background:var(--amarillo); color:var(--madera);
    font-family:var(--fuente-display); font-size:.8rem; letter-spacing:2px;
    padding:6px 18px; border-radius:30px; margin-bottom:22px; text-transform:uppercase;
  }
  .hero h2{
    font-size:clamp(2.4rem,7vw,4.6rem); color:var(--crema); line-height:1.02;
    text-shadow:0 6px 24px rgba(0,0,0,.6);
  }
  .hero h2 em{font-style:normal; color:var(--amarillo);}
  .hero p{max-width:520px; margin:22px auto 34px; font-size:1.1rem; color:var(--texto-suave);}
  .hero-botones{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

  .btn{
    display:inline-block; font-family:var(--fuente-display); letter-spacing:1px;
    text-transform:uppercase; padding:15px 32px; border-radius:10px; font-size:.95rem;
    transition:transform .2s ease, box-shadow .2s ease; border:2px solid transparent; cursor:pointer;
  }
  .btn-primario{background:var(--amarillo); color:var(--madera); box-shadow:0 8px 22px rgba(245,197,24,.25);}
  .btn-primario:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(245,197,24,.4);}
  .btn-secundario{background:transparent; border-color:var(--crema); color:var(--crema);}
  .btn-secundario:hover{background:var(--crema); color:var(--madera); transform:translateY(-3px);}

  /* ---------- Encabezados de sección ---------- */
  .titulo-seccion{text-align:center; margin-bottom:48px;}
  .titulo-seccion .kicker{
    color:var(--amarillo); font-family:var(--fuente-display); letter-spacing:3px;
    font-size:.85rem; display:block; margin-bottom:8px;
  }
  .titulo-seccion h2{font-size:clamp(1.8rem,4vw,2.6rem); color:var(--crema);}
  .titulo-seccion .linea{
    width:70px; height:4px; margin:16px auto 0;
    background:linear-gradient(90deg,var(--carbon),var(--amarillo));
    border-radius:4px;
  }

  /* ---------- Franja "sobre el bar" ---------- */
  .sobre{background:var(--madera);}
  .sobre-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; text-align:center;}
  .sobre-card{
    background:rgba(0,0,0,.2); padding:28px 20px; border-radius:var(--radio);
    border:1px solid rgba(245,197,24,.18);
  }
  .sobre-card .icono{font-size:2.2rem; margin-bottom:10px;}
  .sobre-card h3{font-size:1.05rem; color:var(--amarillo); margin-bottom:8px;}
  .sobre-card p{color:var(--texto-suave); font-size:.92rem;}
  @media(max-width:760px){.sobre-grid{grid-template-columns:1fr;}}

  /* ---------- Carta (acordeón) ---------- */
  .carta{background:var(--carbon);}
  .acordeon{max-width:840px; margin:0 auto; display:flex; flex-direction:column; gap:14px;}
  details.categoria{
    background:var(--madera); border-radius:var(--radio); overflow:hidden;
    border:1px solid rgba(245,197,24,.15);
  }
  details.categoria[open]{border-color:var(--amarillo);}
  details.categoria summary{
    list-style:none; cursor:pointer; padding:20px 24px; display:flex; align-items:center;
    justify-content:space-between; gap:14px; font-family:var(--fuente-display);
    letter-spacing:.5px; font-size:1.05rem; color:var(--crema);
  }
  details.categoria summary::-webkit-details-marker{display:none;}
  .sum-izq{display:flex; align-items:center; gap:12px;}
  .sum-izq .icono{font-size:1.4rem;}
  .flecha{transition:transform .3s ease; color:var(--amarillo); font-size:1.1rem;}
  details.categoria[open] .flecha{transform:rotate(180deg);}

  .panel-carta{padding:0 24px 26px;}
  .nota-panel{
    color:var(--texto-suave); font-size:.85rem; font-style:italic; margin-bottom:14px;
    border-left:3px solid var(--amarillo); padding-left:10px;
  }
  .lista-platos{display:grid; gap:0;}
  .fila-plato{
    display:flex; align-items:baseline; gap:8px; padding:10px 0;
    border-bottom:1px dashed rgba(244,235,218,.15);
  }
  .fila-plato:last-child{border-bottom:none;}
  .fila-plato .nombre{color:var(--texto-claro); font-size:.98rem;}
  .fila-plato .puntos{flex:1; border-bottom:2px dotted rgba(244,235,218,.2); margin-bottom:5px;}
  .fila-plato .precio{color:var(--amarillo-suave); font-weight:800; white-space:nowrap;}

  .subgrupo-titulo{
    color:var(--amarillo); font-family:var(--fuente-display); font-size:.85rem;
    letter-spacing:1.5px; margin:18px 0 6px; text-transform:uppercase;
  }

  /* ---------- Galería ---------- */
  .galeria{background:var(--madera);}
  .galeria-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  }
  .galeria-item{
    position:relative; overflow:hidden; border-radius:var(--radio); aspect-ratio:4/3;
    border:2px solid rgba(245,197,24,.15);
  }
  .galeria-item img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
  .galeria-item:hover img{transform:scale(1.08);}
  .galeria-item .etiqueta{
    position:absolute; bottom:0; left:0; right:0; padding:10px 14px;
    background:linear-gradient(0deg, rgba(0,0,0,.75), transparent);
    font-size:.82rem; color:var(--crema); font-weight:700;
  }
  @media(max-width:820px){.galeria-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:480px){.galeria-grid{grid-template-columns:1fr;}}

  /* ---------- Reseñas ---------- */
  .resenas{background:var(--carbon);}
  .resenas-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .resena-card{
    background:var(--madera); border-radius:var(--radio); padding:26px;
    border:1px solid rgba(245,197,24,.15); display:flex; flex-direction:column; gap:12px;
  }
  .estrellas{color:var(--amarillo); font-size:1.05rem; letter-spacing:2px;}
  .resena-card p{color:var(--texto-suave); font-size:.95rem; font-style:italic;}
  .resena-autor{display:flex; align-items:center; gap:10px; margin-top:auto;}
  .avatar{
    width:38px; height:38px; border-radius:50%; background:var(--amarillo);
    display:flex; align-items:center; justify-content:center; font-family:var(--fuente-display);
    color:var(--carbon); flex-shrink:0;
  }
  .resena-autor strong{color:var(--crema); font-size:.9rem;}
  @media(max-width:900px){.resenas-grid{grid-template-columns:1fr;}}

  /* ---------- Horario + Ubicación ---------- */
  .info-doble{background:var(--madera);}
  .info-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
  .info-grid.solo{grid-template-columns:1fr; max-width:640px; margin:0 auto;}
  .info-bloque{background:rgba(0,0,0,.22); border-radius:var(--radio); padding:32px; border:1px solid rgba(245,197,24,.15);}
  .info-bloque h3{color:var(--amarillo); font-size:1.2rem; margin-bottom:18px; display:flex; align-items:center; gap:10px;}
  .tabla-horario{width:100%; border-collapse:collapse;}
  .tabla-horario td{padding:10px 0; border-bottom:1px dashed rgba(244,235,218,.15); color:var(--texto-suave);}
  .tabla-horario td:last-child{text-align:right; color:var(--crema); font-weight:700;}
  .aviso-editable{
    margin-top:18px; padding:12px 14px; background:rgba(245,197,24,.1);
    border-left:3px solid var(--amarillo); border-radius:6px; font-size:.85rem; color:var(--texto-suave);
  }
  .direccion p{color:var(--texto-suave); margin-bottom:6px;}
  .mapa-wrap{position:relative; margin-top:18px; border-radius:10px; overflow:hidden; border:2px solid rgba(245,197,24,.2);}
  .mapa-respaldo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .mapa-wrap iframe{position:relative; width:100%; height:230px; border:0; display:block; background:transparent;}
  .mapa-credito{position:absolute; right:0; bottom:0; z-index:2; padding:2px 5px; background:rgba(255,255,255,.94); color:#222; font:10px/1.4 sans-serif;}
  .mapa-cargado .mapa-respaldo,.mapa-cargado .mapa-credito{visibility:hidden;}
  @media(max-width:820px){.info-grid{grid-template-columns:1fr;}}

  /* ---------- Contacto ---------- */
  .contacto{background:var(--carbon); text-align:center;}
  .redes{display:flex; justify-content:center; gap:18px; margin-top:24px; flex-wrap:wrap;}
  .red-item{
    display:flex; align-items:center; gap:10px; background:var(--madera); padding:14px 26px;
    border-radius:40px; border:1px solid rgba(245,197,24,.2); transition:transform .2s ease, border-color .2s;
  }
  .red-item:hover{transform:translateY(-3px); border-color:var(--amarillo);}
  .red-item .icono{font-size:1.3rem;}
  .contacto-nota{
    max-width:520px; margin:26px auto 0; font-size:.85rem; color:var(--texto-suave);
    font-style:italic;
  }

  /* ---------- Footer ---------- */
  footer{background:var(--madera-clara); padding:40px 20px 24px; text-align:center;}
  footer .escudo-footer{width:46px; height:46px; margin:0 auto 12px; border-radius:50%; object-fit:cover;}
  footer h4{color:var(--amarillo); font-size:1.1rem; margin-bottom:6px;}
  footer p{color:var(--texto-suave); font-size:.85rem; margin-bottom:4px;}
  footer .legal{margin-top:18px; font-size:.75rem; color:rgba(216,201,174,.6); line-height:1.7;}

  .flotante-arriba{
    position:fixed; right:20px; bottom:20px; width:48px; height:48px; border-radius:50%;
    background:var(--amarillo); color:var(--madera); display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; box-shadow:0 6px 18px rgba(0,0,0,.4); opacity:0; pointer-events:none;
    transition:opacity .3s ease; z-index:90; border:none; cursor:pointer;
  }
  .flotante-arriba.visible{opacity:1; pointer-events:auto;}

  /* ---------- Asistente de IA (chat) ---------- */
  .chat-burbuja{
    position:fixed; left:20px; bottom:20px; z-index:95;
    display:flex; align-items:center; gap:10px; background:var(--amarillo); color:var(--madera);
    border:none; border-radius:50px; padding:14px 20px 14px 14px; cursor:pointer;
    box-shadow:0 8px 22px rgba(0,0,0,.4); font-family:var(--fuente-display); font-size:.85rem;
    letter-spacing:.5px; text-transform:uppercase;
  }
  .chat-burbuja .icono-chat{font-size:1.3rem;}
  .chat-burbuja.oculto{display:none;}

  .chat-panel{
    position:fixed; left:20px; bottom:20px; z-index:96; width:min(360px,calc(100vw - 40px));
    height:min(520px,calc(100vh - 40px)); background:var(--madera); border:1px solid rgba(245,197,24,.3);
    border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.55); display:none; flex-direction:column;
    overflow:hidden;
  }
  .chat-panel.abierto{display:flex;}
  .chat-cabecera{
    background:var(--carbon); padding:14px 16px; display:flex; align-items:center; justify-content:space-between;
    border-bottom:2px solid var(--amarillo);
  }
  .chat-cabecera-titulo{display:flex; align-items:center; gap:10px;}
  .chat-cabecera-titulo strong{font-family:var(--fuente-display); color:var(--amarillo); font-size:.95rem; text-transform:uppercase;}
  .chat-cabecera-titulo span{display:block; font-size:.72rem; color:var(--texto-suave);}
  .chat-cerrar{background:none; border:none; color:var(--texto-claro); font-size:1.3rem; cursor:pointer; line-height:1;}
  .chat-mensajes{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;}
  .chat-mensaje{max-width:85%; padding:10px 14px; border-radius:14px; font-size:.88rem; line-height:1.5;}
  .chat-mensaje.asistente{background:rgba(245,197,24,.14); border:1px solid rgba(245,197,24,.25); color:var(--texto-claro); align-self:flex-start; border-bottom-left-radius:4px;}
  .chat-mensaje.usuario{background:var(--amarillo); color:var(--madera); align-self:flex-end; border-bottom-right-radius:4px; font-weight:600;}
  .chat-sugerencias{display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px;}
  .chat-chip{
    background:rgba(245,197,24,.12); border:1px solid rgba(245,197,24,.3); color:var(--texto-claro);
    font-size:.78rem; padding:7px 12px; border-radius:20px; cursor:pointer;
  }
  .chat-chip:hover{background:rgba(245,197,24,.22);}
  .chat-form{display:flex; gap:8px; padding:12px 14px; border-top:1px solid rgba(245,197,24,.2); background:rgba(0,0,0,.15);}
  .chat-form input{
    flex:1; background:rgba(0,0,0,.3); border:1px solid rgba(245,197,24,.25); border-radius:24px;
    padding:10px 16px; color:var(--texto-claro); font-family:var(--fuente-texto); font-size:.88rem;
  }
  .chat-form input:focus{outline:none; border-color:var(--amarillo);}
  .chat-form button{
    background:var(--amarillo); color:var(--madera); border:none; border-radius:50%; width:40px; height:40px;
    font-size:1.1rem; cursor:pointer; flex-shrink:0;
  }
  .chat-typing{font-size:.8rem; color:var(--texto-suave); font-style:italic; padding:0 16px 10px;}
  @media(max-width:480px){
    .chat-panel{left:10px; right:10px; width:auto; bottom:10px; height:min(70vh,520px);}
    .chat-burbuja{left:10px; bottom:10px;}
  }

  /* ---------- Redes en el pie (próximamente) ---------- */
  footer .redes-pie{display:flex; justify-content:center; flex-wrap:wrap; gap:6px 22px; margin-top:12px;}
  footer .redes-pie span{color:var(--crema); font-size:.85rem; font-weight:700;}
  footer .redes-pie em{color:var(--texto-suave); font-weight:400; font-style:italic;}

  /* ---------- Carta con fotos ---------- */
  .nota-fotos{
    max-width:640px; margin:-24px auto 28px; text-align:center;
    color:var(--texto-suave); font-size:.88rem; font-style:italic;
  }
  .fila-plato.con-foto{align-items:center;}
  .fila-plato.con-foto .puntos{margin-bottom:0; min-width:12px;}
  .fila-plato.con-foto .nombre{flex:0 1 auto; min-width:0;}
  .miniaturas{display:flex; gap:6px; flex-shrink:0;}
  .miniatura{
    padding:0; border:2px solid rgba(245,197,24,.3); border-radius:10px; overflow:hidden;
    width:56px; height:56px; background:var(--madera); cursor:zoom-in; display:block;
    transition:transform .2s ease, border-color .2s ease;
  }
  .miniatura img{width:100%; height:100%; object-fit:cover;}
  .miniatura:hover{transform:scale(1.06); border-color:var(--amarillo);}
  .miniatura:focus-visible, button.galeria-item:focus-visible, .visor-cerrar:focus-visible,
  .caja-form input:focus-visible, .caja-form select:focus-visible, .caja-form textarea:focus-visible{
    outline:3px solid var(--amarillo); outline-offset:2px;
  }
  @media(max-width:480px){
    .miniatura{width:48px; height:48px;}
    .panel-carta{padding:0 14px 22px;}
  }

  /* ---------- Galería con botones ---------- */
  button.galeria-item{padding:0; display:block; width:100%; cursor:zoom-in; background:var(--madera); font:inherit; color:inherit; text-align:left;}
  button.galeria-item .etiqueta{text-align:left;}

  /* ---------- Visor de fotos ---------- */
  .visor{
    position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.9);
    display:flex; align-items:center; justify-content:center;
    padding:max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    cursor:zoom-out;
  }
  .visor[hidden]{display:none !important;}
  .visor figure{max-width:960px; width:100%; margin:0;}
  .visor img{width:100%; max-height:78vh; object-fit:contain; border-radius:var(--radio); margin:0 auto;}
  .visor figcaption{margin-top:12px; text-align:center; color:var(--amarillo-suave); font-family:var(--fuente-display); letter-spacing:.5px; text-transform:uppercase; font-size:1.05rem;}
  .visor-cerrar{
    position:absolute; top:max(14px, env(safe-area-inset-top, 0px)); right:max(14px, env(safe-area-inset-right, 0px));
    width:44px; height:44px; border-radius:50%; border:2px solid var(--crema); background:rgba(0,0,0,.5);
    color:var(--crema); font-size:1.1rem; cursor:pointer;
  }
  body.visor-abierto{overflow:hidden;}

  /* ---------- Formularios (fotos y opiniones) ---------- */
  .aporta{background:var(--carbon);}
  .aporta-caja{
    max-width:640px; margin:0 auto; background:var(--madera-clara); border-radius:var(--radio);
    padding:32px; border:1px solid rgba(245,197,24,.2);
  }
  .aporta-caja .kicker{display:block; color:var(--amarillo); font-size:.78rem; letter-spacing:2px; text-transform:uppercase; font-weight:800; margin-bottom:6px;}
  .aporta-caja h2, .aporta-caja h3{color:var(--crema); font-size:clamp(1.4rem,3.4vw,1.9rem); margin-bottom:12px;}
  .aporta-texto{color:var(--texto-suave); margin-bottom:22px;}
  .caja-form{display:grid; gap:16px;}
  .campo{display:grid; gap:6px;}
  .campo label{color:var(--crema); font-size:.9rem; font-weight:700;}
  .caja-form input[type=text], .caja-form select, .caja-form textarea, .caja-form input[type=file]{
    width:100%; background:var(--carbon); color:var(--crema); font:inherit; font-size:1rem;
    border:1px solid rgba(245,197,24,.3); border-radius:10px; padding:12px 14px;
  }
  .caja-form textarea{resize:vertical; min-height:110px;}
  .caja-form input[type=file]{padding:10px;}
  .permiso{display:flex; gap:10px; align-items:flex-start; color:var(--texto-suave); font-size:.88rem; line-height:1.5; cursor:pointer;}
  .permiso input{margin-top:4px; width:18px; height:18px; flex-shrink:0; accent-color:var(--amarillo);}
  .caja-form .btn{justify-self:start; border:none; cursor:pointer; font:inherit; font-weight:800;}
  .caja-form .btn[disabled]{opacity:.55; cursor:progress; transform:none;}
  .estado-envio{min-height:1.4em; font-size:.92rem; color:var(--texto-suave);}
  .estado-envio.ok{color:#8fd694;}
  .estado-envio.error{color:#ff9a8a;}

  /* ---------- Opiniones: próximamente ---------- */
  .proximamente{
    max-width:640px; margin:0 auto 36px; text-align:center; padding:30px 24px;
    border:2px dashed rgba(245,197,24,.35); border-radius:var(--radio); background:rgba(245,197,24,.05);
  }
  .sello{
    display:inline-block; font-family:var(--fuente-display); text-transform:uppercase; letter-spacing:2px;
    color:var(--carbon); background:var(--amarillo); padding:6px 16px; border-radius:30px; margin-bottom:12px;
  }
  .proximamente p{color:var(--texto-suave);}
  .resenas-grid:empty{display:none;}
  .resenas-grid{margin-bottom:36px;}

.homenaje{padding:26px 16px 30px;background:var(--negro,#111)}
.homenaje-caja{max-width:520px;margin:0 auto;text-align:center;padding:16px 18px;border:1px solid rgba(245,197,24,.35);border-radius:10px;background:rgba(245,197,24,.05)}
.homenaje-etiqueta{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#F5C518;margin-bottom:4px}
.homenaje h2{margin:0 0 8px;font-size:1.1rem;color:#fff;font-weight:700;letter-spacing:.02em}
.homenaje p{margin:0 auto 8px;max-width:48ch;line-height:1.55;color:#dcdcdc;font-size:.88rem}
.homenaje-cierre{color:#F5C518!important;font-style:italic;margin-bottom:0!important}

/* ---------- Portada con foto (sustituye al fondo anterior) ---------- */
.hero{
  background-image:none; background-color:var(--carbon);
  justify-content:flex-start; text-align:left; overflow:hidden;
  padding:100px max(24px,6vw) 70px;
}
/* La foto se ve entera, a la derecha, y se funde con el fondo oscuro por la izquierda */
.hero-foto{position:absolute; top:0; right:0; bottom:0; height:100%; width:auto; max-width:68%; object-fit:cover; object-position:50% 50%; z-index:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);}
.hero::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(18,15,11,0) 78%, var(--carbon) 100%);}
.hero-contenido{position:relative; z-index:2; max-width:540px; margin:0;}
.hero h2{font-size:clamp(2.2rem,4.4vw,3.5rem); text-shadow:0 2px 18px rgba(0,0,0,.55);}
.hero p{margin-left:0; margin-right:0;}
.hero-botones{justify-content:flex-start;}
@media(max-width:820px){
  .hero{display:block; min-height:0; padding:0; text-align:center;}
  .hero-contenido{max-width:none; margin:0 auto; padding:34px max(20px,5vw) 40px;}
  .hero p{margin-left:auto; margin-right:auto;}
  .hero-botones{justify-content:center;}
  .hero::before{display:none;}
  .hero-foto{position:relative; top:auto; right:auto; bottom:auto; display:block; width:100%; max-width:100%; height:auto; aspect-ratio:1320/1394; max-height:80vh; -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%); mask-image:linear-gradient(180deg,#000 80%,transparent 100%);}
}