/*
Theme Name: Patiperros PET - Astra Child
Template: astra
Version: 1.0
Description: Tema hijo de Astra para Patiperros PET
Author: Patiperros PET
*/

/* =============================================
   VARIABLES DE COLOR
   ============================================= */
:root {
  --azul: #1A5FA8;
  --azul-oscuro: #1A3A6B;
  --azul-claro: #e6f0fb;
  --amarillo: #F5C842;
  --amarillo-oscuro: #c8960a;
  --verde-wa: #25d366;
  --texto: #1a1a2e;
  --texto-suave: #6b7280;
  --borde: #e5e7eb;
  --fondo: #f9fafb;
  --blanco: #ffffff;
}

/* =============================================
   RESET Y BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--texto);
  background: var(--blanco);
  margin: 0;
  padding: 0;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-oscuro); }

/* =============================================
   FIXES PARA ASTRA — LAYOUT
   ============================================= */

/* Eliminar padding/margin del contenido de Astra */
.ast-container,
.site-content,
#content,
.ast-article-post,
.entry-content,
.ast-page-builder-template .entry-content,
#primary {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Forzar secciones a bloque vertical */
.hero-section,
.seccion,
.page-hero {
  display: block !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
}

/* Eliminar sidebar */
#secondary,
.widget-area,
.ast-right-sidebar,
.ast-left-sidebar {
  display: none !important;
}

/* Área de contenido ocupa todo el ancho */
#primary.content-area {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Quitar padding del article */
.ast-separate-container .ast-article-post,
.ast-plain-container .ast-article-post,
article.post,
article.page {
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Fix para el entry-content de Astra */
.entry-content > *,
.ast-page-builder-template .entry-content > * {
  max-width: 100% !important;
}

/* Ocultar título de página que Astra agrega */
.entry-header,
.ast-page-title-bar,
.page-header {
  display: none !important;
}

/* Fix redes sociales en header */
.ast-header-custom-widget,
.header-social-icons,
.ast-masthead-custom-menu-items {
  display: none !important;
}

/* Footer limpio */
.site-footer .ast-footer-overlay,
.site-footer .footer-widget-area {
  background: var(--azul-oscuro) !important;
}

.ast-small-footer {
  background: var(--azul-oscuro) !important;
  color: #6b9fd4 !important;
}

.ast-small-footer a {
  color: #8fbce0 !important;
}

/* Ocultar footer de Hostinger/tema anterior */
.hfb-footer-builder,
[data-section="section-fb-footer"] {
  display: none !important;
}

/* =============================================
   HEADER / NAVBAR
   ============================================= */
.site-header,
#masthead {
  background: var(--azul) !important;
  padding: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.ast-site-identity .site-title a,
.site-title a {
  color: var(--blanco) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}

.ast-site-identity .site-description {
  color: #b8d4f0 !important;
  font-size: 12px !important;
}

/* Menú de navegación */
.main-navigation a,
.ast-nav-menu > li > a,
#site-navigation a {
  color: #d4e8ff !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 8px 14px !important;
  transition: color 0.2s;
}

.main-navigation a:hover,
.ast-nav-menu > li > a:hover,
.ast-nav-menu > li.current-menu-item > a {
  color: var(--amarillo) !important;
}

/* Botón WhatsApp en header */
.header-wa-btn {
  background: var(--verde-wa);
  color: var(--blanco) !important;
  padding: 8px 18px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: opacity 0.2s;
}

.header-wa-btn:hover { opacity: 0.9; color: var(--blanco) !important; }

/* =============================================
   BOTONES GENERALES
   ============================================= */
.btn-primario {
  background: var(--amarillo);
  color: var(--azul-oscuro);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 28px;
  border: none;
  cursor: pointer;
  display: inline-block;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
}

.btn-primario:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245,200,66,0.4);
  color: var(--azul-oscuro);
}

.btn-secundario {
  background: transparent;
  border: 2px solid var(--blanco);
  color: var(--blanco);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 28px;
  border-radius: 28px;
  display: inline-block;
  transition: background 0.2s;
  text-decoration: none;
}

.btn-secundario:hover {
  background: rgba(255,255,255,0.1);
  color: var(--blanco);
}

.btn-wa {
  background: var(--verde-wa);
  color: var(--blanco);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.btn-wa:hover { opacity: 0.9; color: var(--blanco); }

/* =============================================
   HERO - HOME
   ============================================= */
.hero-section {
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-oscuro) 100%);
  padding: 80px 0 60px;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
}

.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
}

.hero-titulo {
  color: var(--blanco);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem;
}

.hero-titulo span { color: var(--amarillo); }

.hero-descripcion {
  color: #b8d4f0;
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 2rem;
  max-width: 480px;
}

.hero-botones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.hero-sucursales {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.badge-sucursal {
  background: rgba(255,255,255,0.12);
  color: #d4e8ff;
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hero-imagenes {
  display: flex;
  gap: 10px;
  align-items: center;
}

.hero-img {
  width: 120px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.1);
}

.hero-img.alto { height: 180px; margin-top: -20px; }

.hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =============================================
   SECCIONES GENERALES
   ============================================= */
.seccion {
  padding: 64px 0;
}

.seccion-gris { background: var(--fondo); }

.contenedor {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.seccion-titulo {
  font-size: 28px;
  font-weight: 700;
  color: var(--texto);
  margin: 0 0 0.4rem;
}

.seccion-titulo span { color: var(--azul); }

.seccion-subtitulo {
  font-size: 15px;
  color: var(--texto-suave);
  margin: 0 0 2.5rem;
}

.divider { height: 1px; background: var(--borde); margin: 0; }

/* =============================================
   TARJETAS DE SERVICIOS
   ============================================= */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.servicio-card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.servicio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(26,95,168,0.1);
}

.servicio-icono {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.servicio-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--texto);
  margin: 0 0 0.5rem;
}

.servicio-card p {
  font-size: 14px;
  color: var(--texto-suave);
  line-height: 1.6;
  margin: 0 0 1rem;
}

.servicio-card a {
  font-size: 13px;
  color: var(--azul);
  font-weight: 500;
}

/* =============================================
   GALERÍA
   ============================================= */
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.galeria-item {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1;
  position: relative;
  background: var(--fondo);
}

.galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.galeria-item:hover img { transform: scale(1.05); }

.galeria-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(26,58,107,0.85);
  color: var(--blanco);
  font-size: 12px;
  padding: 6px 10px;
  text-align: center;
}

/* =============================================
   BANNER CURSOS
   ============================================= */
.curso-banner {
  background: var(--amarillo);
  border-radius: 16px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.curso-banner h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--azul-oscuro);
  margin: 0 0 0.4rem;
}

.curso-banner p {
  font-size: 14px;
  color: #2a4d8a;
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

.curso-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.curso-pill {
  background: rgba(26,74,138,0.12);
  color: var(--azul-oscuro);
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 10px;
}

.btn-curso {
  background: var(--azul);
  color: var(--blanco);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 28px;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.2s;
}

.btn-curso:hover { opacity: 0.9; color: var(--blanco); }

/* =============================================
   PÁGINA PELUQUERÍA - TARIFAS
   ============================================= */
.page-hero {
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-oscuro) 100%);
  padding: 60px 0;
}

.page-hero h1 {
  color: var(--blanco);
  font-size: 34px;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.page-hero h1 span { color: var(--amarillo); }
.page-hero p { color: #b8d4f0; font-size: 15px; line-height: 1.7; margin: 0; }

.breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 1rem;
}

.breadcrumb a { color: #7fb3e0; font-size: 13px; }
.breadcrumb span { color: #4a8fc4; font-size: 13px; }

/* Tabs de peluquería */
.tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tab-btn {
  padding: 12px 20px;
  font-size: 14px;
  color: var(--texto-suave);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s;
}

.tab-btn.activo {
  color: var(--azul);
  border-bottom-color: var(--azul);
  font-weight: 600;
}

.tab-contenido { display: none; }
.tab-contenido.activo { display: block; }

/* Tabla de tarifas */
.tarifa-header {
  background: var(--azul);
  color: var(--blanco);
  padding: 12px 20px;
  border-radius: 12px 12px 0 0;
  font-size: 15px;
  font-weight: 600;
}

.tabla-tarifas {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--borde);
  border-top: none;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.tabla-tarifas th {
  background: var(--fondo);
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-suave);
  padding: 10px 18px;
  text-align: left;
  border-bottom: 1px solid var(--borde);
}

.tabla-tarifas td {
  padding: 12px 18px;
  font-size: 14px;
  border-bottom: 1px solid var(--borde);
}

.tabla-tarifas tr:last-child td { border-bottom: none; }

.precio-basico { color: var(--azul); font-weight: 700; font-size: 16px; }
.precio-premium { color: var(--amarillo-oscuro); font-weight: 700; font-size: 16px; }

.badge-peso {
  background: var(--fondo);
  border: 1px solid var(--borde);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 8px;
  color: var(--texto-suave);
  display: inline-block;
}

/* Incluye */
.incluye-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 1rem;
}

.incluye-box {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 16px 18px;
}

.incluye-box h4 {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px;
}

.incluye-box h4.azul { color: var(--azul); }
.incluye-box h4.amarillo { color: var(--amarillo-oscuro); }

.chips-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chip {
  background: var(--blanco);
  border: 1px solid var(--borde);
  font-size: 11px;
  color: var(--texto-suave);
  padding: 3px 9px;
  border-radius: 6px;
}

/* Alerta */
.alerta-box {
  background: #fff8e1;
  border: 1px solid var(--amarillo);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 1.5rem;
}

.alerta-box p {
  font-size: 13px;
  color: #7a5800;
  line-height: 1.6;
  margin: 0;
}

/* CTA box */
.cta-box {
  background: var(--azul);
  border-radius: 16px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2rem;
}

.cta-box h3 { color: var(--blanco); font-size: 18px; font-weight: 700; margin: 0 0 0.3rem; }
.cta-box p { color: #b8d4f0; font-size: 14px; margin: 0; }

/* =============================================
   PÁGINA CURSOS
   ============================================= */
.clases-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.clase-card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.clase-card.destacada { border-color: var(--amarillo); }

.clase-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--azul);
  color: var(--blanco);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.clase-num.amarillo { background: var(--amarillo); color: var(--azul-oscuro); }

.clase-card h4 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }

.clase-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.clase-card ul li {
  font-size: 12px;
  color: var(--texto-suave);
  padding: 3px 0;
  padding-left: 12px;
  position: relative;
  line-height: 1.4;
}

.clase-card ul li::before {
  content: '·';
  color: var(--azul);
  position: absolute;
  left: 0;
  font-size: 16px;
  line-height: 1;
}

.incluye-iconos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 1.5rem;
}

.incluye-icono-card {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.incluye-icono-card .icono { font-size: 28px; margin-bottom: 8px; }
.incluye-icono-card p { font-size: 12px; color: var(--texto-suave); margin: 0; line-height: 1.4; }

/* Formulario inscripción */
.inscripcion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 2rem;
}

.form-group { margin-bottom: 14px; }
.form-group label { font-size: 13px; color: var(--texto-suave); display: block; margin-bottom: 5px; }

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--blanco);
  color: var(--texto);
  font-family: inherit;
}

.form-group textarea { height: 80px; resize: vertical; }

/* =============================================
   PÁGINA CONTACTO
   ============================================= */
.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.contacto-info h2 { font-size: 24px; font-weight: 700; margin: 0 0 0.5rem; }
.contacto-info p { color: var(--texto-suave); font-size: 15px; margin: 0 0 2rem; }

.sucursal-card {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 14px;
}

.sucursal-card h4 { font-size: 14px; font-weight: 600; color: var(--azul); margin: 0 0 6px; }
.sucursal-card p { font-size: 13px; color: var(--texto-suave); margin: 0; line-height: 1.6; }

.redes-lista {
  display: flex;
  gap: 10px;
  margin-top: 1.5rem;
}

.red-btn {
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.red-btn.instagram { background: #e1306c; color: var(--blanco); }
.red-btn.whatsapp { background: var(--verde-wa); color: var(--blanco); }

/* =============================================
   FOOTER
   ============================================= */
.site-footer,
#colophon {
  background: var(--azul-oscuro) !important;
  color: #6b9fd4 !important;
  padding: 24px 0 !important;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-inner p { font-size: 13px; color: #6b9fd4; margin: 0; }

.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { color: #8fbce0; font-size: 13px; text-decoration: none; }
.footer-links a:hover { color: var(--blanco); }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-imagenes { display: none; }
  .hero-titulo { font-size: 28px; }
  .servicios-grid { grid-template-columns: 1fr; }
  .galeria-grid { grid-template-columns: repeat(2, 1fr); }
  .curso-banner { flex-direction: column; text-align: center; }
  .clases-grid { grid-template-columns: 1fr; }
  .incluye-iconos { grid-template-columns: repeat(2, 1fr); }
  .inscripcion-grid { grid-template-columns: 1fr; }
  .contacto-grid { grid-template-columns: 1fr; }
  .cta-box { flex-direction: column; text-align: center; }
  .footer-inner { flex-direction: column; gap: 1rem; text-align: center; }
}

/* =============================================
   FIX DEFINITIVO LAYOUT ASTRA
   ============================================= */

/* Forzar el área de contenido a bloque */
.patiperros-fullwidth {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* El main de Astra a veces usa flex */
.ast-article-inner-content,
.ast-container > .ast-row,
#content > .ast-container,
.ast-row {
  display: block !important;
  flex-wrap: unset !important;
}

/* Quitar padding interno de Astra en páginas */
.ast-page-builder-template #content .ast-container,
.ast-no-sidebar #content .ast-container {
  padding: 0 !important;
}

/* Quitar margen del entry en páginas con nuestros templates */
.patiperros-fullwidth .entry-content {
  margin: 0 !important;
  padding: 0 !important;
}

/* Asegurar que cada sección ocupe el ancho completo */
.hero-section,
.seccion,
.page-hero,
.divider {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  display: block !important;
}

/* =============================================
   AJUSTES HEADER Y HERO
   ============================================= */

/* Reducir tamaño del header */
#masthead .ast-site-identity,
.site-branding {
  padding: 8px 0 !important;
}

/* Logo más pequeño */
.custom-logo {
  max-height: 60px !important;
  width: auto !important;
}

.ast-logo-img,
.custom-logo-link img {
  max-height: 60px !important;
  height: 60px !important;
  width: auto !important;
}

/* Botón WhatsApp — pequeño y discreto */
.header-wa-btn {
  font-size: 12px !important;
  padding: 6px 14px !important;
  border-radius: 16px !important;
  line-height: 1.4 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

/* Reducir altura del header general */
.ast-primary-header-bar {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.main-header-bar {
  padding: 6px 0 !important;
}

/* Más espacio entre header y hero */
.hero-section {
  padding-top: 120px !important;
  padding-bottom: 70px !important;
}