/*
Theme Name: Pem-A Theme AMC
Theme URI: http://example.com/
Author: Alicia Moreno Castro
Description: Modernized version with parallax backgrounds, sticky header and scroll animations. Keeps original logo and typography.
Version: 1.1
License: GNU General Public License v2 or later
Text Domain: pem-a-theme-modern
*/

/* Keep original font via local @font-face (already included in assets/fonts/agenda.css) */
@import url('assets/fonts/agenda.css');

:root{
  --accent:#007367;
  --accent-dark:#13322B;
  --bg:#ffffff;
  --muted:#D9D9D6;
}

/* =========================================================
   RESETEOS BÁSICOS Y COMPORTAMIENTO GLOBAL
   ========================================================= */

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  font-family:'Agenda Light', sans-serif;
  color:#1f1f1f;
  scroll-behavior:smooth;
}

/* Imágenes y vídeos responsivos */
img,
video{
  max-width:100%;
  height:auto;
  display:block;
}

/* Enlaces */
a{
  color:var(--accent);
  text-decoration:none;
}

/* =========================================================
   HEADER – sticky
   ========================================================= */

.site-header{
  position:fixed;
  left:0;
  right:0;
  top:0;
  z-index:999;
  background:rgba(255,255,255,0.8);
  backdrop-filter:blur(6px);
  transition:background 250ms ease, box-shadow 250ms ease, padding 250ms ease;
  padding:18px 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* Estado al hacer scroll (añadir .scrolled con JS si se desea) */
.site-header.scrolled{
  background:rgba(255,255,255,0.98);
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
  padding:10px 30px;
}

/* Logo / branding */
.site-branding{
  display:flex;
  align-items:center;
  gap:14px;
}

.site-branding img{
  height:60px;
  width:auto;
  display:block;
}

/* =========================================================
   BOTÓN MENÚ HAMBURGUESA (texto ☰ / ✕)
   ========================================================= */

.nav-toggle{
  display:none;              /* visible solo en móvil */
  border:none;
  background:transparent;
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
  padding:4px 6px;
  margin-left:auto;
  color:#13322B;
}

/* =========================================================
   MENÚ PRINCIPAL (solo header)
   ========================================================= */

#site-header .main-navigation{
  display:flex;
  align-items:center;
  gap:0;
}

#site-header .main-navigation ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:0;
}

#site-header .main-navigation ul > li{
  margin:0;
  padding:0;
  border-right:1px solid #e5e5e5;
}

#site-header .main-navigation ul > li:first-child{
  border-left:1px solid #e5e5e5;
}

#site-header .main-navigation ul > li > a{
  display:block;
  padding:14px 28px;
  background:transparent;
  color:#333;
  border-radius:0;
  font-weight:500;
  text-transform:none;
  letter-spacing:0;
  white-space:nowrap; /* evita cortes raros en escritorio */
}

#site-header .main-navigation ul > li:hover > a{
  background:#13322B;
  color:#fff;
}

#site-header .main-navigation ul > li.menu-area-privada > a{
  background:#13322B;
  color:#fff;
  font-weight:600;
}

#site-header .main-navigation ul > li.menu-area-privada:hover > a{
  background:#0b3c35;
}

/* =========================================================
   HERO / PARALLAX
   ========================================================= */

.parallax{
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-attachment:fixed;
  background-position:center;
  background-size:cover;
  position:relative;
  color:#ffffff;
  text-align:center;
  padding:80px 20px;
}

.parallax .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.25));
}

.parallax > *{
  position:relative;
  z-index:1;
}

/* =========================================================
   CONTENIDO
   ========================================================= */

/* Compensación por header fijo */
.site-content{
  padding-top:110px; /* escritorio / tablet */
}

.section{
  padding:80px 20px;
  max-width:900px;
  width:100%;
  margin:0 auto;
}

.section h2{
  margin:0 0 18px;
  font-size:32px;
}

/* Scroll reveal */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 600ms ease, transform 600ms ease;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
  padding:40px 20px;
  background:#f7f7f7;
  color:#1f1f1f;
  text-align:center;
}

/* =========================================================
   TIPOGRAFÍA CORPORATIVA (AJUSTADA)
   ========================================================= */

/* Titulares */
h1,
h2,
h3,
h4,
h5,
h6{
  font-family:'Agenda Medium', sans-serif;
  color:#0b7262;
  margin-top:0.5em;
  margin-bottom:0.4em;
  line-height:1.2;
}

/* H1 grande escritorio */
h1{
  font-size:3rem;
  font-weight:700;
}

/* H2 secundario escritorio */
h2{
  font-size:2.2rem;
  font-weight:600;
}

/* Texto general */
p,
li,
span,
.section p{
  font-family:'Agenda Light', sans-serif;
  font-size:1.08rem;
  color:#1f1f1f;
  line-height:1.6;
}

/* Énfasis */
strong,
b{
  font-family:'Agenda Medium', sans-serif;
}

/* Texto en hero */
.parallax h1,
.parallax h2,
.parallax p{
  color:#ffffff !important;
  font-family:'Agenda Medium', sans-serif;
}

/* =========================================================
   LOGO PERSONALIZADO EXTRA
   ========================================================= */

.custom-logo{
  max-height:120px;
  height:auto;
  width:auto;
  object-fit:contain;
  vertical-align:middle;
}

.logo{
  display:flex;
  align-items:center;
  gap:15px;
}

.logo h1{
  margin:0;
  font-size:1.5rem;
  color:#ffffff;
}

/* =========================================================
   OVERLAY FONDO CUANDO MENÚ ESTÁ ABIERTO
   ========================================================= */

body.nav-open::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.35); /* oscurece el fondo */
  z-index:900;                 /* por debajo del header (999) y del menú móvil */
}

/* =========================================================
   RESPONSIVE – TABLET Y MÓVIL
   ========================================================= */

/* --- Tablet horizontal / pantallas medianas (≤ 1024px) --- */
@media (max-width:1024px){

  .site-header{
    padding:14px 20px;
  }

  .site-branding img{
    height:52px;
  }

  #site-header .main-navigation ul > li > a{
    padding:12px 18px;
    font-size:14px;
  }

  .section{
    padding:60px 24px;
  }

  .parallax{
    min-height:50vh;
    padding:60px 20px;
  }

  h1{
    font-size:2.6rem;
  }

  h2{
    font-size:2rem;
  }
}

/* --- Tablet vertical y móviles grandes (≤ 768px) --- */
@media (max-width:768px){

  /* Cabecera en fila: logo izquierda, hamburguesa derecha */
  .site-header{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;   /* logo e icono a extremos */
    padding:12px 16px;
  }

  .site-branding{
    margin-bottom:0;
    padding-right:12px;
    flex:0 0 auto;
  }

  .site-branding img{
    height:48px;
  }

  /* Mostrar botón hamburguesa */
  .nav-toggle{
    display:block;
    margin-left:0;
    flex:0 0 auto;
  }

  /* El NAV no debe ocupar espacio en el header */
  #site-header .main-navigation{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:100%;
    display:block;
    padding:0;
    margin:0;
    flex:0 0 auto;
  }

  /* UL oculto por defecto y como dropdown */
  #site-header .main-navigation ul{
    position:relative;
    top:0;
    left:0;
    right:0;
    margin:0;
    padding:8px 0;
    list-style:none;
    display:none;               /* oculto por defecto */
    flex-direction:column;
    background:rgba(255,255,255,0.97);
    border-top:1px solid #e5e5e5;
    box-shadow:0 8px 20px rgba(0,0,0,0.18);
    z-index:1200;               /* por encima del overlay (900) y header (999) */
  }

  #site-header .main-navigation ul > li{
    flex:0 0 auto;
    width:100%;
    text-align:left;
    border-left:none;
    border-right:none;
    border-bottom:1px solid #f0f0f0;
  }

  #site-header .main-navigation ul > li:last-child{
    border-bottom:none;
  }

  #site-header .main-navigation ul > li > a{
    padding:10px 16px;
    font-size:14px;
    white-space:normal; /* permitimos salto de línea en móvil */
  }

  /* Hero más bajo y sin background-attachment fijo en móviles */
  .parallax{
    min-height:40vh;
    background-attachment:scroll !important;
    background-position:center top !important;
    padding:50px 16px;
  }

  .section{
    padding:40px 24px;
    max-width:100%;
  }

  /* Ajuste de contenido por header fijo en móvil */
  .site-content{
    padding-top:95px;
  }

  /* Titulares más contenidos en móvil */
  h1{
    font-size:1.9rem;
    line-height:1.25;
  }

  h2{
    font-size:1.4rem;
  }

  p,
  li,
  span,
  .section p{
    font-size:1.02rem;
    line-height:1.6;
  }

  /* Cuando el body tenga .nav-open mostramos el menú */
  body.nav-open #site-header .main-navigation ul{
    display:flex !important;
  }
}

/* --- Móviles pequeños (≤ 480px) --- */
@media (max-width:480px){

  .site-header{
    padding:10px 12px;
  }

  .site-branding img{
    height:44px;
  }

  #site-header .main-navigation ul > li{
    flex:1 1 100%;
  }

  #site-header .main-navigation ul > li > a{
    padding:8px 10px;
    font-size:13px;
  }

  .parallax{
    min-height:35vh;
    padding:40px 12px;
  }

  .section{
    padding:32px 20px;
  }

  h1{
    font-size:1.7rem;
  }

  h2{
    font-size:1.3rem;
  }

  p,
  li,
  span,
  .section p{
    font-size:1rem;
    line-height:1.55;
  }
}