/*
Theme Name: El Fogón Taquería
Theme URI: https://elfogon.local/
Author: El Fogón Taquería
Author URI: https://elfogon.local/
Description: Tema personalizado para El Fogón Taquería. Sitio de una sola página con secciones de quiénes somos, eventos, paquetes, ubicación y menú, con modal de pedidos por WhatsApp o menú digital.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: el-fogon-taqueria
Tags: restaurant, food, one-page, custom
*/

    /* ===== ROLNER TIPOGRAFÍA ===== */
    @font-face {
      font-family: 'Rolner';
      src: url('fonts/ROLNER.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    /* ===== RESET & BASE ===== */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Poppins', sans-serif;
      color: #fff;
      background: #1a1a1a;
      overflow-x: hidden;
      line-height: 1.5;
    }

    :root {
      --rojo: #d62828;
      --rojo-oscuro: #b71c1c;
      --amarillo: #fcd34d;
      --negro: #0a0a0a;
      --crema: #fef9ef;
    }

    /* Patrones de fondo (rojo y negro) */
    .pattern-bg {
      background-color: var(--rojo);
      background-image: url('images/pattern-red.jpg');
      background-size: 220px;       /* preserva proporciones del JPG */
      background-repeat: repeat;
    }
    .pattern-bg-dark {
      background-color: var(--negro);
      background-image: url('images/pattern-black.jpg');
      background-size: 220px;
      background-repeat: repeat;
    }

    /* ===== HEADER / NAV ===== */
    .header {
      background-color: var(--rojo);
      background-image: url('images/pattern-red.jpg');
      background-size: 220px;
      padding: 18px 6%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 4px 16px rgba(0,0,0,.25);
    }
    .logo-img {
      height: 60px;
      width: auto;
      filter: brightness(0) invert(1);
      animation: pulse 2.5s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.05); }
    }
    .nav {
      display: flex;
      gap: 50px;
      align-items: center;
    }
    .nav a {
      color: #fff;
      text-decoration: none;
      font-family: 'Rolner', sans-serif;
      font-size: 22px;
      letter-spacing: 1.5px;
      transition: transform .25s ease, color .25s ease;
      position: relative;
    }
    .nav a:not(.pedir-btn)::after {
      content: '';
      position: absolute;
      left: 0; bottom: -6px;
      width: 0; height: 2px;
      background: var(--amarillo);
      transition: width .3s ease;
    }
    .nav a:not(.pedir-btn):hover::after { width: 100%; }
    .nav a:hover { color: var(--amarillo); }
    .pedir-btn {
      background: var(--amarillo);
      color: var(--negro) !important;
      padding: 10px 32px;
      border-radius: 999px;
      font-weight: 800;
      box-shadow: 0 4px 12px rgba(0,0,0,.25);
      transition: transform .2s ease, box-shadow .2s ease;
      font-family: 'Rolner', sans-serif;
      font-size: 22px;
      letter-spacing: 1.5px;
      border: none;
      cursor: pointer;
    }
    .pedir-btn:hover {
      transform: translateY(-3px) scale(1.05);
      box-shadow: 0 8px 24px rgba(0,0,0,.35);
    }
    .pedir-btn::after { display: none !important; }

    .menu-toggle {
      display: none;
      background: none;
      border: none;
      color: white;
      font-size: 30px;
      cursor: pointer;
    }

    /* ===== HERO / QUIÉNES SOMOS ===== */
    .hero {
      padding: 70px 6% 90px;
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 60px;
      align-items: center;
      position: relative;
      overflow: hidden;
    }
    .hero h1 {
      font-family: 'Rolner', sans-serif;
      font-size: clamp(42px, 7vw, 84px);
      color: var(--amarillo);
      line-height: 1;
      margin-bottom: 24px;
      letter-spacing: 1px;
    }
    .hero p {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 18px;
      color: #fff;
    }
    /* Dos platos superpuestos como en el diseño */
    .hero-img-wrap {
      position: relative;
      animation: floatY 4s ease-in-out infinite;
      min-height: 400px;
    }
    .hero-img-wrap .plate-front {
      position: relative;
      width: 75%;
      z-index: 2;
      filter: drop-shadow(0 20px 40px rgba(0,0,0,.6));
    }
    .hero-img-wrap .plate-back {
      position: absolute;
      width: 70%;
      right: -10px;
      top: 30px;
      z-index: 1;
      filter: drop-shadow(0 20px 40px rgba(0,0,0,.4));
    }
    @keyframes floatY {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-15px); }
    }

    /* ===== EVENTOS ===== */
    .eventos {
      padding: 70px 6%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }
    .eventos h2 {
      font-family: 'Rolner', sans-serif;
      font-size: clamp(48px, 8vw, 96px);
      color: var(--amarillo);
      margin-bottom: 24px;
      letter-spacing: 2px;
    }
    .eventos p {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 16px;
    }
    .eventos-img {
      width: 100%;
      max-width: 700px;
      border-radius: 12px;
      box-shadow: 0 20px 40px rgba(0,0,0,.5);
      transition: transform .5s ease;
      object-fit: cover;
      aspect-ratio: 4/3;
    }
    .eventos-img:hover { transform: scale(1.03) rotate(-1deg); }

    /* ===== PAQUETES ===== */
    .paquetes {
      padding: 80px 6% 100px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      max-width: 1300px;
      margin: 0 auto;
    }
    .paquete-card {
      background: #fff;
      color: var(--negro);
      border-radius: 28px;
      padding: 50px 36px 36px;
      position: relative;
      box-shadow: 0 20px 60px rgba(0,0,0,.4);
      transition: transform .35s ease, box-shadow .35s ease;
    }
    .paquete-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 30px 80px rgba(0,0,0,.55);
    }
    .badge-oferta {
      position: absolute;
      top: -32px;
      left: 30px;
      background: var(--rojo);
      color: #fff;
      font-family: 'Rolner', sans-serif;
      font-size: 14px;
      letter-spacing: 1px;
      padding: 12px 18px;
      border-radius: 8px;
      box-shadow: 0 6px 14px rgba(0,0,0,.3);
      text-align: center;
      line-height: 1.2;
      animation: badgePulse 1.8s ease-in-out infinite;
    }
    .badge-oferta::after {
      content: '';
      position: absolute;
      bottom: -12px;
      left: 30px;
      border: 12px solid transparent;
      border-top-color: var(--rojo);
      border-bottom: 0;
      border-right: 0;
    }
    @keyframes badgePulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.06); }
    }
    .paquete-title {
      font-family: 'Rolner', sans-serif;
      font-size: clamp(28px, 3.6vw, 42px);
      color: var(--amarillo);
      margin-bottom: 24px;
      letter-spacing: 1px;
      text-shadow: 2px 2px 0 #b8860b;
      line-height: 1;
    }
    .paquete-card ul {
      list-style: none;
      margin-bottom: 30px;
    }
    .paquete-card li {
      padding: 10px 0 10px 28px;
      position: relative;
      font-weight: 500;
      font-size: 16px;
    }
    .paquete-card li::before {
      content: '•';
      position: absolute;
      left: 8px;
      color: var(--rojo);
      font-weight: 800;
      font-size: 22px;
      line-height: 1;
    }
    .info-btn {
      display: block;
      width: 100%;
      max-width: 260px;
      margin: 0 auto;
      background: var(--amarillo);
      color: var(--negro);
      font-family: 'Rolner', sans-serif;
      font-size: 17px;
      letter-spacing: 1px;
      padding: 14px 28px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      box-shadow: 0 6px 16px rgba(0,0,0,.3);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .info-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 24px rgba(0,0,0,.45);
    }

    /* ===== UBICACIÓN ===== */
    .ubicacion-section {
      padding: 70px 6% 80px;
      text-align: center;
    }
    .pill-title {
      display: inline-block;
      background: var(--amarillo);
      color: #fff;
      font-family: 'Rolner', sans-serif;
      font-size: clamp(36px, 6vw, 64px);
      padding: 12px 70px;
      border-radius: 20px;
      margin-bottom: 50px;
      letter-spacing: 2px;
      box-shadow: 0 8px 24px rgba(0,0,0,.35);
      text-shadow: 2px 2px 0 #b8860b;
    }
    .ubicacion-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      max-width: 1300px;
      margin: 0 auto;
    }
    .ubicacion-card h3 {
      font-family: 'Rolner', sans-serif;
      color: var(--amarillo);
      font-size: clamp(20px, 2.6vw, 30px);
      margin-bottom: 18px;
      letter-spacing: 1px;
    }
    .map-wrap {
      display: block;
      width: 100%;
      aspect-ratio: 1 / 1;
      background: var(--crema);
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      box-shadow: 0 16px 40px rgba(0,0,0,.4);
      transition: transform .4s ease;
    }
    .map-wrap:hover { transform: scale(1.02); }
    .map-wrap iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }

    /* ===== MENÚ ===== */
    .menu-section {
      padding: 70px 6% 80px;
    }
    .menu-section h2 {
      font-family: 'Rolner', sans-serif;
      font-size: clamp(56px, 10vw, 120px);
      color: var(--amarillo);
      letter-spacing: 4px;
      margin-bottom: 50px;
      text-align: left;
      line-height: 1;
    }
    .menu-imgs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      max-width: 1400px;
      margin: 0 auto 80px;
    }
    .menu-imgs img {
      width: 100%;
      border-radius: 16px;
      box-shadow: 0 20px 50px rgba(0,0,0,.45);
      transition: transform .4s ease;
      object-fit: cover;
    }
    .menu-imgs img:hover {
      transform: scale(1.025) rotate(-0.5deg);
    }

    /* ===== CARRUSEL DE PRODUCTOS ===== */
    .carousel {
      max-width: 1400px;
      margin: 0 auto;
      overflow: hidden;
      padding: 20px 0;
      position: relative;
    }
    .carousel::before, .carousel::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      width: 100px;
      z-index: 2;
      pointer-events: none;
    }
    .carousel::before {
      left: 0;
      background: linear-gradient(to right, var(--negro), transparent);
    }
    .carousel::after {
      right: 0;
      background: linear-gradient(to left, var(--negro), transparent);
    }
    .carousel-track {
      display: flex;
      gap: 30px;
      animation: scroll-x 25s linear infinite;
      width: max-content;
    }
    .carousel:hover .carousel-track { animation-play-state: paused; }

    .carousel-item {
      flex: 0 0 auto;
      width: 360px;
      height: 360px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .35s ease;
    }
    .carousel-item img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 20px 30px rgba(0,0,0,.6));
      transition: transform .4s ease;
    }
    .carousel-item:hover { transform: translateY(-12px); }
    .carousel-item:hover img { transform: scale(1.1) rotate(-3deg); }

    @keyframes scroll-x {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* ===== PEDIR FINAL ===== */
    .pedir-final-wrap {
      text-align: center;
      padding: 60px 0 100px;
    }
    .pedir-final {
      display: inline-block;
      background: var(--amarillo);
      color: var(--negro);
      font-family: 'Rolner', sans-serif;
      font-size: clamp(32px, 5vw, 56px);
      padding: 18px 90px;
      border-radius: 999px;
      text-decoration: none;
      letter-spacing: 4px;
      box-shadow: 0 12px 32px rgba(0,0,0,.4);
      transition: all .25s ease;
      position: relative;
      overflow: hidden;
      border: none;
      cursor: pointer;
    }
    .pedir-final::before {
      content: '';
      position: absolute;
      inset: -3px;
      background: linear-gradient(45deg, transparent, rgba(255,255,255,.5), transparent);
      transform: translateX(-100%);
      transition: transform .6s ease;
    }
    .pedir-final:hover {
      transform: translateY(-6px) scale(1.05);
      box-shadow: 0 24px 50px rgba(0,0,0,.55);
    }
    .pedir-final:hover::before { transform: translateX(100%); }

    /* ===== MODAL PEDIR ===== */
    .pedir-modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.75);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2000;
      opacity: 0;
      visibility: hidden;
      transition: opacity .3s ease, visibility .3s ease;
      backdrop-filter: blur(6px);
      padding: 20px;
    }
    .pedir-modal.open {
      opacity: 1;
      visibility: visible;
    }
    .pedir-modal-box {
      background: #fff;
      background-image: url('images/pattern-red.svg');
      background-size: 220px;
      border-radius: 28px;
      padding: 50px 40px 40px;
      max-width: 480px;
      width: 100%;
      position: relative;
      box-shadow: 0 30px 80px rgba(0,0,0,.55);
      transform: scale(.85) translateY(40px);
      transition: transform .35s cubic-bezier(.34,1.56,.64,1);
      text-align: center;
    }
    .pedir-modal.open .pedir-modal-box {
      transform: scale(1) translateY(0);
    }
    .pedir-modal-close {
      position: absolute;
      top: 12px;
      right: 18px;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: none;
      background: rgba(0,0,0,.85);
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .2s ease, background .2s ease;
    }
    .pedir-modal-close:hover {
      background: var(--negro);
      transform: rotate(90deg);
    }
    .pedir-modal-title {
      font-family: 'Rolner', sans-serif;
      font-size: clamp(28px, 4vw, 40px);
      color: var(--amarillo);
      letter-spacing: 2px;
      margin-bottom: 8px;
      text-shadow: 2px 2px 0 #b8860b;
    }
    .pedir-modal-subtitle {
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 28px;
      opacity: .9;
    }
    .pedir-options {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .pedir-option {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 16px 20px;
      border-radius: 16px;
      text-decoration: none;
      color: var(--negro);
      background: #fff;
      box-shadow: 0 6px 18px rgba(0,0,0,.18);
      transition: transform .25s ease, box-shadow .25s ease;
      border: 2px solid transparent;
    }
    .pedir-option:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 28px rgba(0,0,0,.35);
      border-color: var(--amarillo);
    }
    .pedir-option-icon {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .pedir-option-icon.wa { background: #25d366; }
    .pedir-option-icon.menu { background: var(--rojo); }
    .pedir-option-icon svg {
      width: 28px;
      height: 28px;
      fill: #fff;
    }
    .pedir-option-text {
      text-align: left;
      flex: 1;
    }
    .pedir-option-text strong {
      font-family: 'Rolner', sans-serif;
      font-size: 22px;
      letter-spacing: 1px;
      display: block;
      color: var(--negro);
    }
    .pedir-option-text span {
      font-size: 13px;
      color: #555;
      font-weight: 500;
    }
    .pedir-option-arrow {
      color: var(--rojo);
      font-size: 28px;
      flex-shrink: 0;
      transition: transform .25s ease;
    }
    .pedir-option:hover .pedir-option-arrow {
      transform: translateX(6px);
    }

    /* ===== FOOTER ===== */
    .footer {
      background: var(--negro);
      color: #888;
      text-align: center;
      padding: 30px 20px;
      font-size: 14px;
      border-top: 2px solid var(--rojo);
    }
    .footer a { color: var(--amarillo); text-decoration: none; }

    /* ===== ANIMACIONES DE SCROLL ===== */
    .reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-left { opacity: 0; transform: translateX(-60px); transition: opacity .8s ease, transform .8s ease; }
    .reveal-left.visible { opacity: 1; transform: translateX(0); }
    .reveal-right { opacity: 0; transform: translateX(60px); transition: opacity .8s ease, transform .8s ease; }
    .reveal-right.visible { opacity: 1; transform: translateX(0); }

    /* ===== WHATSAPP FLOTANTE ===== */
    .whatsapp-float {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 60px;
      height: 60px;
      background: #25d366;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 18px rgba(0,0,0,.35);
      z-index: 999;
      animation: floatY 3s ease-in-out infinite;
      transition: transform .25s ease;
    }
    .whatsapp-float:hover { transform: scale(1.15); }
    .whatsapp-float svg { width: 32px; height: 32px; fill: #fff; }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 900px) {
      .header { padding: 14px 5%; }
      .menu-toggle { display: block; }
      .nav {
        position: absolute;
        top: 100%; right: 0; left: 0;
        background: var(--rojo);
        background-image: url('images/pattern-red.svg');
        background-size: 220px;
        flex-direction: column;
        gap: 22px;
        padding: 28px;
        clip-path: inset(0 0 100% 0);
        transition: clip-path .35s ease;
      }
      .nav.open { clip-path: inset(0 0 0 0); }
      .hero, .eventos, .paquetes, .ubicacion-grid, .menu-imgs {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .hero-img-wrap { min-height: 350px; }
      .carousel-item { width: 280px; height: 280px; }
      .menu-section h2 { text-align: center; }
    }
    @media (max-width: 500px) {
      .pedir-final { padding: 14px 50px; letter-spacing: 2px; }
      .pill-title { padding: 8px 36px; }
    }