/* =========================================================
   ALMIRA CANDLES — estilos.css
   - Paleta pastel
   - Componentes globales (botones, grids, cards…)
   - Estilos específicos de Galería (.ac-*)
   ========================================================= */

/* =============== 1) Variables y tipografía =============== */
:root{
  /* Paleta pastel */
  --bg:#fff7f9;              /* fondo general */
  --card:#ffffff;            /* base de tarjetas */
  --surface:#ffeef3;         /* variante suave de tarjeta (utilidades) */
  --surface-2:#ffdfe9;       /* variante + intensa (utilidades) */

  --text:#3b2f2f;            /* texto principal */
  --muted:#8b6f6f;           /* texto secundario */

  --brand:#ec7aa8;           /* rosa suave (marca) */
  --brand-2:#c7a7ff;         /* lila suave (acento) */
  --accent:#ffdf6d;          /* amarillo pastel (detalles) */

  --ok:#6fb9a6;              /* verde menta (estados) */
  --error:#f8a5ae;           /* rojo pastel (estados) */

  --radius:18px;             /* radios por defecto */
  --shadow:0 10px 30px rgba(0,0,0,.10);  /* sombra por defecto */
  --ring:0 0 0 3px rgba(236,122,168,.35); /* foco accesible */
  --maxw:1160px;

  /* Escala tipográfica fluida */
  --step--1: clamp(12px, 0.9vw, 14px);
  --step-0:  clamp(14px, 1.1vw, 16px);
  --step-1:  clamp(18px, 2.4vw, 22px);
  --step-2:  clamp(24px, 3.2vw, 28px);
  --step-3:  clamp(32px, 4.4vw, 44px);
}

/* ================= 2) Reset y base global ================= */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
html,body{ height:100% }

body,
body.ac-body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg),#ffffff 60%);
  line-height:1.6;
  font-size:var(--step-0);
}

/* Contenedores & helpers genéricos (para otras páginas) */
.container{ max-width:var(--maxw); margin-inline:auto; padding:clamp(16px,3vw,24px) }
.section{ padding:clamp(36px,7vw,96px) 0 }
.title{ font-size:var(--step-3); line-height:1.15; margin:0 0 12px; text-align:center }
.subtitle{ font-size:var(--step-0); color:var(--muted); margin:0; text-align:center }
.muted{ color:var(--muted) }

/* =================== 3) Controles UI ===================== */
/* Botones */
.btn{
  appearance:none; border:0; min-height:44px;
  border-radius:14px; padding:12px 18px;
  background:var(--brand); color:#2f2327; font-weight:600;
  cursor:pointer; transition:transform .2s, box-shadow .2s;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(236,122,168,.35) }
.btn:focus-visible{ outline:none; box-shadow:var(--ring) }
.btn.alt{ background:transparent; border:1px solid #eab7c126; color:var(--text) }

/* Chips (píldoras informativas) */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--brand-2); color:var(--text);
  padding:10px 14px; border-radius:999px;
}

/* Grids & Cards genéricos (útiles fuera de la galería) */
.grid{ display:grid; gap:clamp(16px,2.5vw,24px) }
.grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:900px){ .grid.cols-3{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .grid.cols-2,.grid.cols-3{ grid-template-columns:1fr } }

.card{
  background:var(--surface); border:1px solid var(--surface-2);
  border-radius:20px; box-shadow:var(--shadow); overflow:hidden;
  transition:transform .2s, box-shadow .2s;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(236,122,168,.35) }
.card-body{ padding:clamp(16px,3.5vw,28px) }
.card h3{ margin:0 0 6px; font-size:clamp(18px,2.2vw,22px) }

/* =================== 4) Navbar (opcional) ================= */
.navbar{ position:sticky; top:0; z-index:40; background:rgba(255,247,249,.9);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--surface-2) }
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px }
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.3px }
.brand-img{ height:64px; width:64px; border-radius:14px; object-fit:contain; background:#fff; box-shadow:0 0 0 1px var(--surface-2) }
.nav ul{ display:flex; gap:10px; margin:0; padding:0; list-style:none }
.nav a{ padding:12px 14px; border-radius:10px; color:var(--text); text-decoration:none; font-weight:500; min-height:44px; display:flex; align-items:center }
.nav a:hover,.nav a[aria-current="page"]{ background:#ffc9d633 }
.menu-btn{ display:none }
@media (max-width:860px){
  .nav{ position:fixed; inset:64px 16px auto 16px; background:var(--surface); border:1px solid var(--surface-2);
        border-radius:16px; box-shadow:var(--shadow); padding:12px; display:none }
  .nav.open{ display:block }
  .nav ul{ flex-direction:column }
  .menu-btn{ display:inline-flex }
}

/* ===================== 5) Hero genérico ================== */
.hero{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  gap:clamp(20px,4vw,28px);
}
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; }
}

/* Contenedor del logo en el hero (lado derecho) */
.hero-cover{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--surface-2);

  /* Mantén una altura y proporción agradables */
  aspect-ratio: 4 / 3;
  min-height: 280px;
  padding: 28px;

  /* Fondo suave y homogéneo */
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  box-shadow: 0 6px 20px rgba(0,0,0,.05);

  /* Centrar el logo */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Imagen del logo dentro del hero */
.hero-logo{
  max-width: 85%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.12));
  transition: transform .3s ease;
}
.hero-logo:hover{ transform: scale(1.04); }


/* =========================================================
   6) GALERÍA — estilos específicos (prefijo .ac-)
   Usado directamente por galeria.php
   ========================================================= */

/* Encabezado con halo pastel */
.ac-hero{
  background:
    radial-gradient(1200px 300px at 50% -40%, rgba(255,223,109,.35), transparent 60%),
    radial-gradient(1000px 250px at 10% -30%, rgba(199,167,255,.25), transparent 60%),
    radial-gradient(1100px 300px at 90% -30%, rgba(236,122,168,.25), transparent 60%),
    #fff;
  padding:56px 20px 40px; text-align:center;
}
.ac-hero h1{
  margin:0 0 6px; font-size:clamp(28px,4vw,40px);
  font-weight:700; letter-spacing:.2px;
}
.ac-hero p{ margin:0; color:var(--muted); font-weight:500 }

/* Contenedor general de la página */
.ac-container{ max-width:1200px; margin:0 auto; padding:18px 20px 60px }

/* Filtros (chips) */
.ac-filters{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; margin:10px 0 24px;
}
.ac-chip{
  appearance:none; border:none; cursor:pointer;
  padding:10px 14px; border-radius:999px;
  background:#f3eef6; color:#5d4d6a; font-weight:600;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  transition:transform .15s ease, background .15s ease;
}
.ac-chip:hover{ transform:translateY(-1px) }
.ac-chip.is-active{ background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff }

/* Grid de galería */
.ac-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
}

/* Tarjetas de galería */
.ac-card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden; position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
}
.ac-card:hover{ transform:translateY(-4px); box-shadow:0 18px 45px rgba(0,0,0,.15) }

/* Imágenes: proporción consistente */
.ac-card img{
  width:100%;
  aspect-ratio:4 / 3;          /* mantiene cuadrícula ordenada */
  object-fit:cover;
  display:block;
  background:#f6f6f6;
}

.ac-card figcaption{ padding:12px 14px 14px }
.ac-card h3{ font-size:16px; margin:8px 0 0; font-weight:600; color:var(--text) }

/* Badges */
.ac-badge{
  display:inline-block; font-size:12px; padding:4px 10px; border-radius:999px;
  background:rgba(255,223,109,.45); color:#6b5a26; font-weight:700; letter-spacing:.3px;
}
.ac-badge--muted{ background:rgba(199,167,255,.25); color:#4d3f74 }

/* ====== Lightbox ====== */
.ac-lightbox{
  border:none;
  padding:0;
  /* Que el contenedor se adapte a la pantalla en lugar de ancho fijo */
  width:auto;
  max-width:96vw;           /* margen lateral cómodo */
  max-height:96vh;          /* nunca más alto que la ventana */
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,.35);
  background:#fff;
}
.ac-lightbox::backdrop{
  background:rgba(25,18,22,.55);
}

/* La imagen debe ENCAJAR (contain) dentro del diálogo */
.ac-lightbox img{
  display:block;
  margin:20px auto 8px;      /* centrada y con respiro */
  width:auto;
  height:auto;
  max-width:calc(96vw - 40px);
  max-height:calc(96vh - 120px); /* deja espacio a la X y al pie */
  object-fit:contain;         /* clave: no recorta, mantiene proporción */
  background:#fff;
  border-radius:12px;
}

/* Pie centrado y con recorte si es largo */
.ac-lightbox p{
  margin:0;
  padding:10px 16px 16px;
  text-align:center;
  color:#5a4a4a;
  border-top:1px solid #f0e8f0;
  max-width:calc(96vw - 40px);
  white-space:normal;
}

/* Botón cerrar con mejor zona táctil */
.ac-lightbox-close{
  position:absolute;
  right:10px; top:10px;
  border:none;
  background:#ffffffcc;
  width:38px; height:38px;
  border-radius:50%;
  cursor:pointer;
  font-size:22px; line-height:38px;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
}
.ac-lightbox-close:hover{ background:#fff }

/* Ajuste fino en pantallas pequeñas */
@media (max-width:520px){
  .ac-lightbox img{
    margin:14px auto 6px;
    max-height:calc(96vh - 100px);
  }
}
/* Ajustes responsive finos */
@media (min-width:992px){
  .ac-gallery{ gap:22px }
}

/* ============== 7) Formularios (genérico) =============== */
form{ display:grid; gap:14px }
.field{ display:grid; gap:6px }
input,select,textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--surface-2); background:#fff; color:var(--text); font:inherit;
}
input::placeholder,textarea::placeholder{ color:#8a6d7388 }
input:focus,textarea:focus,select:focus{ outline:none; box-shadow:var(--ring) }
.form-grid{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr) }
@media (max-width:720px){ .form-grid{ grid-template-columns:1fr } }

/* Estados de validación accesibles */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{
  border-color:var(--error);
  box-shadow:0 0 0 3px rgba(248,165,174,.25);
}
.error-note{ color:var(--error); font-size:var(--step--1); margin-top:4px }

/* ========== 8) Botones con icono & WhatsApp FAB ========= */
.btn-icon{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; font-weight:700; border-radius:14px }
.btn-icon svg{ width:20px; height:20px; display:block; fill:currentColor }

.btn-icon.whatsapp{ background:#25D366; color:#fff }
.btn-icon.whatsapp:hover{ filter:brightness(0.95) }

.btn-icon.instagram{ background:#fff; color:var(--text); border:1px solid var(--surface-2) }
.btn-icon.instagram:hover{ box-shadow:0 8px 20px rgba(236,122,168,.35) }
/* Mantener degradado nativo del SVG de Instagram */
.btn-icon.instagram svg,
.btn-icon.instagram svg *{ fill:unset !important; stroke:unset !important }

/* FAB de WhatsApp (móvil) */
.wa-fab{
  position:fixed; right:16px; bottom:16px; width:56px; height:56px; border-radius:999px;
  background:#25D366 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163a11.867 11.867 0 01-1.62-6.003C.122 5.281 5.403 0 12.061 0c3.181 0 6.167 1.24 8.413 3.488a11.82 11.82 0 013.485 8.414c-.003 6.659-5.284 11.94-11.942 11.94a11.9 11.9 0 01-6-1.616L.057 24z"/></svg>') center/60% no-repeat;
  box-shadow:0 8px 20px rgba(0,0,0,.25); z-index:50; border:0;
}
@media (min-width:900px){ .wa-fab{ display:none } }

/* ================= 9) Utilidades varias ================= */
.list-clean{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .6s, transform .6s }
.reveal.show{ opacity:1; transform:none }

/* Footer centrado */
footer, footer .container{ text-align:center }

/* ===== Logo en el encabezado ===== */
.ac-logo {
  width: 120px;
  height: auto;
  display: block;
  margin: 0 auto 14px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.08));
  transition: transform .3s ease;
}
.ac-logo:hover {
  transform: scale(1.05);
}
/* ================= Ajuste de color texto del menú ================= */

/* Marca (Almira Candles) y enlaces del menú */
.brand,
.brand span,
.nav a {
  color: #000 !important;            /* Negro puro */
  text-decoration: none !important;
}

/* Hover y estado activo */
.nav a:hover,
.nav a[aria-current="page"] {
  background-color: rgba(0, 0, 0, 0.05);
  color: #000 !important;
}
/* Icono WhatsApp en el menú */
.nav-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.nav-whatsapp:hover {
  transform: scale(1.1);
}