/* ============================================================
   GENERAL PACHECO WEB — MINIPÁGINAS BÁSICAS
   Hoja de estilos única. NO se personaliza por cliente.
   Cualquier cambio acá afecta a las ~40 básicas migradas.
   ============================================================ */

/* ---------- RESET MÍNIMO ----------
   Antes lo daba style.css (vía header.html, que ya no cargamos).
   Sin esto el navegador le pone margin por default al body y el
   hero queda corrido de los bordes reales de la pantalla. */
html, body{
  margin: 0;
  padding: 0;
}
*, *::before, *::after{
  box-sizing: border-box;
}

:root{
  --b-bg:          #fafaf9;
  --b-bg-soft:      #f3f2ee;
  --b-card:         #ffffff;
  --b-text:         #262626;
  --b-text-soft:    #6b6b68;
  --b-accent:       #1b6aa6;
  --b-accent-dark:  color-mix(in srgb, var(--b-accent) 70%, black);
  --b-border:       #e6e4df;
  --b-radius:       14px;
  --b-radius-sm:    8px;
  --b-shadow:       0 8px 24px rgba(0,0,0,.06);
  --b-font:         'Inter', sans-serif;

  /* Quiénes Somos: independientes del color principal.
     Se sobreescriben por página solo si el cliente pide un cuadro
     con color propio (ver quienes-somos.php). Default: blanco/oscuro. */
  --b-qs-bg:   var(--b-card);
  --b-qs-text: var(--b-text);
}

.basica{
  font-family: var(--b-font);
  color: var(--b-text);
  background: var(--b-bg);
}

.basica h2.b-titulo-seccion{
  color: var(--b-accent);
  font-size: 1.6em;
  font-weight: 700;
  text-align: center;
  margin: 0 auto 0.4em;
}
.basica .b-linea{
  width: 60px;
  height: 3px;
  background: var(--b-accent);
  margin: 0 auto 1.6em;
  border-radius: 2px;
}

/* ---------- BARRA "ESTÁS VIENDO UNA MINIPÁGINA" ----------
   Antes la estilaba minipaginas2021.css (vía header.html, que ya
   no cargamos). Ahora es propia, en flujo normal (no fixed, para
   no tapar el hero ni complicar paddings). */
.basica #pw{
  font-size: 0.85em;
  color: #ccc;
  background-color: #333;
  text-align: center;
  padding: 0.5em;
}
.basica #pw a{ color: #9cc7e6; }

/* ---------- HERO ---------- */
.basica .b-hero{
  background-size: cover;
  background-position: center;
  position: relative;
}
.basica .b-hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    180deg,
    var(--b-hero-overlay-top,    rgba(0,0,0,.5)),
    var(--b-hero-overlay-bottom, rgba(0,0,0,.75))
  );
}
.basica .b-hero-content{
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 3em 1em 2.6em;
}
.basica .b-hero-logo{
  width: 120px; height: 120px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  padding: 8px;
  box-shadow: var(--b-shadow);
  margin-bottom: 0.6em;
}
.basica .b-hero-titulo{
  font-size: 2em;
  font-weight: 700;
  margin: 0.2em 0 0.1em;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.basica .b-hero-desc{
  font-size: 1.1em;
  font-weight: 400;
  opacity: .95;
  margin:0;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ---------- SECCIONES GENERALES ---------- */
.basica .b-seccion{
  padding: 2.4em 1em;
}
.basica .b-seccion.b-alt{
  background: var(--b-bg-soft);
}
.basica .b-contenedor{
  max-width: 880px;
  margin: 0 auto;
}

/* ---------- QUIENES SOMOS ---------- */
.basica .b-card-texto{
  background: var(--b-qs-bg);
  color: var(--b-qs-text);
  border: 1px solid var(--b-border);
  border-radius: var(--b-radius);
  box-shadow: var(--b-shadow);
  padding: 1.8em 2em;
  line-height: 1.7em;
  text-align: center;
}

/* ---------- LISTAS (servicios / productos / precios) ---------- */
.basica .b-lista{
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 640px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4em 1.4em;
}
.basica .b-lista li{
  display:flex;
  align-items:flex-start;
  gap: 0.6em;
  text-align: left;
  padding: 0.6em 0;
  border-bottom: 1px solid var(--b-border);
  line-height: 1.4em;
}
.basica .b-lista li i{
  color: var(--b-accent);
  margin-top: 3px;
  flex-shrink: 0;
}
.basica .b-lista.b-lista-precios li{
  justify-content: space-between;
}
.basica .b-lista-precios .b-precio{
  font-weight: 700;
  color: var(--b-accent-dark);
  white-space: nowrap;
  margin-left: 1em;
}
@media (max-width: 640px){
  .basica .b-lista{ grid-template-columns: 1fr; }
}

/* ---------- BOTÓN MENÚ / PDF ---------- */
.basica .b-btn{
  display:inline-flex;
  align-items:center;
  gap:0.5em;
  background: var(--b-accent);
  color:#fff !important;
  padding: 0.8em 1.8em;
  border-radius: 50px;
  font-weight:600;
  text-decoration:none;
  box-shadow: var(--b-shadow);
  transition: background .2s ease;
}
.basica .b-btn:hover{ background: var(--b-accent-dark); }
.basica .b-btn-center{ text-align:center; }

/* ---------- GALERÍA (máx 9 fotos) ---------- */
.basica .b-galeria{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;
}
.basica .b-galeria a{ display:block; overflow:hidden; border-radius: var(--b-radius-sm); box-shadow: var(--b-shadow); }
.basica .b-galeria img{
  width:100%; height: 220px; object-fit: cover;
  display:block;
  transition: transform .25s ease;
}
.basica .b-galeria a:hover img{ transform: scale(1.05); }
@media (max-width: 768px){
  .basica .b-galeria{ grid-template-columns: repeat(2, 1fr); }
  .basica .b-galeria img{ height:160px; }
}
.basica .b-galeria-hint{
  text-align:center;
  font-style: italic;
  color: var(--b-text-soft);
  margin-top: 0.8em;
  font-size: 0.9em;
}

/* ---------- VIDEO ---------- */
.basica .b-video-wrap{
  max-width: 720px;
  margin: 0 auto;
  border-radius: var(--b-radius);
  overflow:hidden;
  box-shadow: var(--b-shadow);
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.basica .b-video-wrap video, .basica .b-video-wrap iframe{
  position: absolute; inset: 0;
  width:100%; height:100%; display:block; border:0;
}

/* ---------- FAQS (acordeón nativo, sin JS) ---------- */
.basica .b-faqs{ max-width: 720px; margin: 0 auto; }
.basica .b-faq{
  background: var(--b-card);
  border: 1px solid var(--b-border);
  border-radius: var(--b-radius-sm);
  margin-bottom: 0.6em;
  overflow: hidden;
}
.basica .b-faq summary{
  padding: 0.9em 1.2em;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display:flex;
  justify-content: space-between;
  align-items:center;
}
.basica .b-faq summary::after{
  content:"\f078";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  color: var(--b-accent);
  transition: transform .2s ease;
}
.basica .b-faq[open] summary::after{ transform: rotate(180deg); }
.basica .b-faq p{ padding: 0 1.2em 1em; margin:0; color: var(--b-text-soft); line-height:1.5em; }

/* ---------- CONTACTO ---------- */
.basica .b-contacto{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2em;
  max-width: 760px;
  margin: 0 auto 1.6em;
}
.basica .b-contacto-item{
  display:flex;
  align-items:center;
  gap: 0.9em;
  background: var(--b-card);
  border:1px solid var(--b-border);
  border-radius: var(--b-radius-sm);
  padding: 1em 1.2em;
}
.basica .b-contacto-item i{
  font-size: 1.3em;
  color: var(--b-accent);
  width: 28px;
  text-align:center;
  flex-shrink:0;
}
.basica .b-contacto-item h3{
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--b-text-soft);
  margin:0 0 0.2em;
}
.basica .b-contacto-item a, .basica .b-contacto-item span{
  color: var(--b-text);
  font-weight:600;
  text-decoration:none;
}
@media (max-width: 640px){
  .basica .b-contacto{ grid-template-columns: 1fr; }
}
.basica .b-mapa{
  border-radius: var(--b-radius);
  overflow:hidden;
  box-shadow: var(--b-shadow);
  max-width: 860px;
  margin: 0 auto;
}
.basica .b-mapa iframe{ width:100%; height:260px; border:0; display:block; }

/* ---------- GALERÍA TIPO SLIDER (Swiper) ----------
   Las reglas de .swiper-wrapper y .swiper-slide llevan !important
   porque el theme general del sitio (style.css) trae embebida una
   versión vieja de Swiper (basada en float, no en flexbox) que
   define sus propias reglas para estas mismas clases y se carga
   DESPUÉS de este archivo. Sin !important, esas reglas viejas
   pisan el layout del Swiper moderno y rompen el slider. */
.basica .b-slider-wrap{
  max-width: 760px;
  margin: 0 auto;
}
.basica .b-swiper{
  border-radius: var(--b-radius);
  overflow: hidden !important;
  box-shadow: var(--b-shadow);
  background: var(--b-bg-soft);
  height: var(--b-slider-alto, 420px);
  position: relative !important;
}
.basica .b-swiper .swiper-wrapper{
  display: flex !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  float: none !important;
}
.basica .b-swiper .swiper-slide{
  flex-shrink: 0 !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  float: none !important;
}
.basica .b-swiper .swiper-slide img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain;
  display: block;
}
.basica .b-swiper .swiper-button-next,
.basica .b-swiper .swiper-button-prev{
  color: #fff;
  background: rgba(0,0,0,.45);
  width: 38px; height: 38px;
  border-radius: 50%;
}
.basica .b-swiper .swiper-button-next::after,
.basica .b-swiper .swiper-button-prev::after{
  font-size: 16px;
}
.basica .b-swiper .swiper-pagination-bullet-active{
  background: var(--b-accent);
}
@media (max-width: 640px){
  .basica .b-swiper{ height: calc(var(--b-slider-alto, 420px) * 0.75); }
}

/* ---------- BOTÓN "VOLVER ARRIBA" ----------
   El theme inyecta este botón por JS (plugin UI-to-top,
   id="ui-to-top" class="ui-to-top fa fa-angle-up") y antes lo
   estilaba style.css. Como ya no cargamos ese archivo, lo
   re-estilamos acá. Ya usa Font Awesome (fa-angle-up) como ícono
   propio vía su clase — no hace falta agregar uno con ::before. */
#ui-to-top{
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  left: auto !important;
  top: auto !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--b-accent) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  color: transparent !important;
  font-size: 0 !important;
  z-index: 999 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}
#ui-to-top:hover{
  background: var(--b-accent-dark) !important;
}
#ui-to-top::before{
  content: "\f077" !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  color: #fff !important;
}

/* ---------- OCULTAR PHOTOSWIPE (footer.php trae el HTML, no lo usamos) ----------
   Su CSS también vivía en style.css. Sin eso, el modal queda visible
   como botones sueltos en vez de oculto hasta que se active (y como
   no lo activamos nunca, nunca debe verse). */
.pswp{
  display: none !important;
}