/* =========================================================
   Arepa Venezuelan Kitchen — estilos comunes
   (encabezado, menú, pie, cuadrícula y animaciones)
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, iframe { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
a { color: #2ea3f2; text-decoration: none; }
a:hover { text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Tipografía base (igual a Divi) ---------- */
body {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7em;
  color: #666;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: 154px;            /* alto del encabezado fijo */
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { color: #333; padding-bottom: 10px; line-height: 1em; font-weight: 500; }
h1 { font-size: 30px; } h2 { font-size: 26px; } h3 { font-size: 22px; }
h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 14px; }
p { padding-bottom: 1em; }
p:last-of-type { padding-bottom: 0; }
strong { font-weight: 700; }

/* ---------- Encabezado ---------- */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%;
  height: 154px;
  background: #000;
  z-index: 99999;
  box-shadow: 0 1px 0 rgba(0,0,0,.1);
  transition: height .4s ease-in-out, box-shadow .4s ease-in-out;
}
.site-header .header-inner {
  width: 80%; max-width: 1080px; height: 100%;
  margin: 0 auto; position: relative;
  display: flex; align-items: center; justify-content: space-between;
}
.site-header .logo { display: flex; align-items: center; height: 100%; }
.site-header .logo img { height: 65%; max-height: 100px; width: auto; transition: all .4s ease-in-out; }
.site-header .main-nav ul { display: flex; gap: 0; }
.site-header .main-nav li { padding-right: 22px; }
.site-header .main-nav li:last-child { padding-right: 0; }
.site-header .main-nav a {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px; font-weight: 600; line-height: 23px;
  color: #fff; display: block;
  transition: opacity .4s ease-in-out;
}
.site-header .main-nav a:hover { opacity: .7; }
.site-header .main-nav a.active { color: #2ea3f2; }

/* encabezado al bajar (más bajo, igual que Divi) */
.site-header.scrolled { height: 115px; box-shadow: 0 0 7px rgba(0,0,0,.1); }
.site-header.scrolled .main-nav a.active { color: #edf000; }

/* botón de menú (celular) */
.menu-toggle { display: none; background: none; border: 0; padding: 0; line-height: 0; color: #2ea3f2; }
.menu-toggle svg { width: 32px; height: 32px; }
.mobile-menu {
  display: none;
  position: absolute; top: 100%; right: 0;
  min-width: 300px; max-height: 83vh; overflow-y: auto;
  background: #000; padding: 5%;
  border-top: 3px solid #2ea3f2;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
  z-index: 9999;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block; padding: 10px 5%;
  border-bottom: 1px solid rgba(0,0,0,.03);
  color: #fff; font-size: 14px; font-weight: 600;
  transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
}
.mobile-menu a:hover { background: rgba(0,0,0,.03); opacity: .7; }
.mobile-menu a.active { color: #2ea3f2; }

/* ---------- Pie ---------- */
.site-footer { background: #000; }
.site-footer .footer-widgets { width: 80%; max-width: 1080px; margin: 0 auto; padding: 6% 0 0; }
.site-footer .footer-widgets p {
  font-size: 12px; line-height: 1.5em; color: #fff; padding-bottom: 0;
  margin-bottom: 9.5%;
}
.site-footer .footer-widgets a { color: #0075fc; }
.site-footer .footer-bottom { background: #000; padding: 15px 0 5px; }

/* ---------- Cuadrícula (equivalente a Divi, separación 3) ---------- */
.section { position: relative; padding: 4% 0; background-position: center; background-size: cover; background-repeat: no-repeat; }
.row { position: relative; width: 80%; max-width: 1080px; margin: auto; padding: 2% 0; }
.row::after { content: ""; display: block; clear: both; }
.col { float: left; position: relative; min-height: 1px; z-index: 2; }
.col:last-child { margin-right: 0 !important; }
.col-4-4 { width: 100%; }
.col-1-2 { width: 47.25%; margin-right: 5.5%; }
.col-1-3 { width: 29.6667%; margin-right: 5.5%; }
.col-2-3 { width: 64.833%; margin-right: 5.5%; }
.col-1-4 { width: 20.875%; margin-right: 5.5%; }
.col-3-4 { width: 73.625%; margin-right: 5.5%; }
.col-2-5 { width: 36.8%; margin-right: 5.5%; }
.col-3-5 { width: 57.7%; margin-right: 5.5%; }
.module { position: relative; margin-bottom: 2.75%; }
.module:last-child { margin-bottom: 0; }
.equal-cols { display: flex; }
.equal-cols > .col { float: none; }

@media (min-width: 1350px) {
  .section { padding: 54px 0; }
  .row { padding: 27px 0; }
}

/* ---------- Separadores con forma (SVG de fondo) ---------- */
.divider { position: absolute; left: 0; width: 100%; pointer-events: none; z-index: 1; background-repeat: repeat-x; }
.divider.bottom { bottom: 0; }
.divider.top { top: 0; }

/* ---------- Botón estilo Divi ---------- */
.btn {
  display: inline-block; position: relative;
  font-size: 20px; font-weight: 500; line-height: 1.7em;
  padding: .3em 1em; border: 2px solid; border-radius: 3px;
  background: transparent; transition: all .3s ease;
}

/* ---------- Video ---------- */
.video-wrap video { width: 100%; height: auto; display: block; }

/* ---------- Animaciones al aparecer (Divi et_animated) ---------- */
[data-anim] { opacity: 0; }
[data-anim].in-view { animation-fill-mode: both; animation-timing-function: ease-in-out; }
[data-anim="fade"].in-view        { animation-name: anim-fade; }
[data-anim="slide-left"].in-view  { animation-name: anim-slide-left; }
[data-anim="slide-right"].in-view { animation-name: anim-slide-right; }
[data-anim="slide-top"].in-view   { animation-name: anim-slide-top; }
[data-anim="slide-bottom"].in-view{ animation-name: anim-slide-bottom; }
[data-anim="zoom"].in-view        { animation-name: anim-zoom; }
[data-anim="bounce"].in-view      { animation-name: anim-bounce; }
[data-anim="flip"].in-view        { animation-name: anim-flip; }
[data-anim="fold"].in-view        { animation-name: anim-fold; }
[data-anim="roll"].in-view        { animation-name: anim-roll; }
@keyframes anim-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes anim-slide-left { from { opacity: 0; transform: translate3d(-100%,0,0); } to { opacity: 1; transform: none; } }
@keyframes anim-slide-right { from { opacity: 0; transform: translate3d(100%,0,0); } to { opacity: 1; transform: none; } }
@keyframes anim-slide-top { from { opacity: 0; transform: translate3d(0,-100%,0); } to { opacity: 1; transform: none; } }
@keyframes anim-slide-bottom { from { opacity: 0; transform: translate3d(0,100%,0); } to { opacity: 1; transform: none; } }
@keyframes anim-zoom { from { opacity: 0; transform: scale3d(.5,.5,.5); } to { opacity: 1; transform: none; } }
@keyframes anim-bounce {
  0%,20%,40%,60%,80%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
  0% { opacity: 0; transform: scale3d(.3,.3,.3); }
  20% { transform: scale3d(1.1,1.1,1.1); }
  40% { transform: scale3d(.9,.9,.9); }
  60% { opacity: 1; transform: scale3d(1.03,1.03,1.03); }
  80% { transform: scale3d(.97,.97,.97); }
  to { opacity: 1; transform: scale3d(1,1,1); }
}
@keyframes anim-flip { from { opacity: 0; transform: perspective(2000px) rotateY(90deg); } to { opacity: 1; transform: none; } }
@keyframes anim-fold { from { opacity: 0; transform: perspective(2000px) rotateY(-90deg); transform-origin: left; } to { opacity: 1; transform: none; } }
@keyframes anim-roll { from { opacity: 0; transform: rotate(-120deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1 !important; animation: none !important; }
}

/* ---------- Visibilidad por dispositivo (igual que Divi) ---------- */
@media (min-width: 981px) { .hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 980px) { .hide-tablet { display: none !important; } }
@media (max-width: 767px) { .hide-phone { display: none !important; } }

/* ---------- Tableta y celular ---------- */
@media (max-width: 980px) {
  body { padding-top: 55px; }
  .site-header { height: 55px; }
  .site-header.scrolled { height: 55px; }
  .site-header .logo img { height: auto; max-height: 51px; position: relative; top: 0; }
  .site-header .main-nav { display: none; }
  .menu-toggle { display: block; }
  .section { padding: 50px 0; }
  .row { padding: 30px 0; }
  .col, .col-1-2, .col-1-3, .col-2-3, .col-1-4, .col-3-4, .col-2-5, .col-3-5 {
    width: 100% !important; margin-right: 0 !important; margin-bottom: 30px; float: none;
  }
  .col:last-child { margin-bottom: 0; }
  .equal-cols { display: block; }
  .site-footer .footer-widgets { padding: 6% 0 0; }
}