/* ═══════════════════════════════════════════════════════════
   ÍNDICE — busca cualquiera de estos títulos (Ctrl+F) para saltar ahí:
   TOKENS · RESET · UTILIDADES · TIPOGRAFÍA · LAYOUT · BOTONES ·
   FORMULARIOS · NAV · HERO · GUÍA DE TRATAMIENTOS · EVENTOS ·
   TARJETAS REGALO · CATÁLOGO DE SERVICIOS · GALERÍA / TRABAJOS
   REALIZADOS · RESERVAR CITA · CONTACTO · FOOTER · LEGAL ·
   MI CUENTA / PANEL ADMIN · BLOG · GESTIÓN DEL BLOG · RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS — SISU-NAILS ──
   Paleta "Rosé elegante": distinta a propósito de la de
   reprogramatubelleza.com (marrones/champagne) — aquí predomina el rosa
   empolvado con un acento dorado para las tarjetas regalo. */
:root {
  --ivory:       #FBF6F4;  /* fondo principal */
  --blush:       #F5E8E4;  /* secciones alternas */
  --nude:        #E8D5CE;  /* bordes, separadores */
  --white:       #FFFFFF;

  --rose:        #B76E79;  /* acento principal — CTA, enlaces */
  --rose-light:  #D9A8AE;  /* acento claro */
  --rose-dark:   #8C4A54;  /* hover de acentos */
  --mauve:       #6B4650;  /* texto secundario profundo */
  --cacao:       #2E2A28;  /* texto principal (nunca negro puro) */
  --topo:        #8A7A76;  /* texto muted */

  --gold:        #C9A66B;  /* tarjetas regalo, detalles premium */
  --gold-light:  #E4D2AE;

  --display: 'Playfair Display', serif;
  --body:    'Poppins', sans-serif;

  --ease:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── RESET ── */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  color: var(--cacao);
  background: var(--ivory);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }

/* ── UTILIDADES ── */
.is-hidden { display: none !important; }
/* Honeypot anti-bots: display:none excluye el campo del Autofill de
   Chrome en todos los navegadores (lección aprendida en
   reprogramatubelleza.com — con solo position:absolute Chrome lo seguía
   rellenando con datos guardados y el envío del formulario abortaba en
   silencio). */
.hp-wrap { display: none; }
.wrap    { max-width: 1180px; margin: 0 auto; padding: 0 60px; }
.wrap-sm { max-width: 720px;  margin: 0 auto; padding: 0 24px; }

/* ── TIPOGRAFÍA ── */
.eyebrow {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mauve);
}
.golden-thread { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.golden-thread::before, .golden-thread::after { content: ''; height: 1px; width: 40px; background: var(--gold); }
.golden-thread.full { justify-content: center; }
.golden-thread.full::before, .golden-thread.full::after { width: 60px; }

.section-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 42px);
  color: var(--mauve);
  line-height: 1.15;
}
.section-sub {
  font-size: 16px;
  color: var(--topo);
  max-width: 620px;
  margin-top: 14px;
}
.section-head { text-align: center; margin-bottom: 56px; }
.section-gap { padding: 100px 0; }
.section-gap-alt { padding: 100px 0; background: var(--blush); }
.section-gap.is-notop { padding-top: 0; }

/* Utilidades puntuales — evitan atributos style="" inline (bloqueados por la CSP). */
.u-center-block { margin-left: auto; margin-right: auto; }
.u-text-center { text-align: center; }
.u-mt-20 { margin-top: 20px; }
.u-mb-24 { margin-bottom: 24px; }
.u-m-0 { margin: 0; }

/* ── LAYOUT ── */
.detail-section { padding: 100px 0; }

/* ── BOTONES ──
   .btn es la base; .btn-rose (sólido) / .btn-outline (borde) / .btn-gold
   (tarjetas regalo). text-align:center desde el principio — en
   reprogramatubelleza.com faltaba y el texto quedaba a la izquierda en
   cualquier botón que un contenedor estirara a ancho completo. */
.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
  text-align: center;
  padding: 16px 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.35s var(--ease);
}
.btn-rose { background: var(--rose); color: var(--white); }
.btn-rose:hover { background: var(--rose-dark); transform: translateY(-2px); }
.btn-outline { background: transparent; border-color: var(--rose); color: var(--rose); }
.btn-outline:hover { background: var(--rose); color: var(--white); transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: var(--white); }
.btn-gold:hover { background: #B08A4F; transform: translateY(-2px); }
.btn-sm { padding: 10px 22px; font-size: 12px; }
.btn-block { display: block; width: 100%; }
.btn:disabled { opacity: 0.6; cursor: default; transform: none !important; }

/* ── FORMULARIOS ── */
.f-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.f-label { font-size: 12px; font-weight: 600; letter-spacing: 0.5px; color: var(--mauve); }
.f-input, .f-select, .f-textarea {
  background: var(--white);
  border: 1px solid var(--nude);
  padding: 13px 16px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--cacao);
  border-radius: 10px;
  transition: border-color 0.3s;
  width: 100%;
}
.f-textarea { resize: vertical; min-height: 110px; }
.f-input:focus, .f-select:focus, .f-textarea:focus { outline: none; border-color: var(--rose); }
.f-input.err, .f-select.err, .f-textarea.err { border-color: #C0392B; }
/* Prefijo de país (bandera+código) + número nacional — ver
   sn_mejorarCampoTelefono() en main.js. */
.f-tel-row { display: flex; gap: 10px; }
.f-tel-prefijo { flex: 0 0 auto; width: auto; max-width: 130px; }
.f-tel-row .f-input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) {
  .f-tel-prefijo { max-width: 128px; font-size: 12px; padding-left: 8px; padding-right: 8px; }
}
.f-file {
  width: 100%;
  font-family: var(--body);
  font-size: 13px;
  color: var(--topo);
  background: var(--white);
  border: 1px solid var(--nude);
  border-radius: 10px;
  padding: 11px 14px;
}
.f-file::file-selector-button {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--white);
  background: var(--rose);
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  margin-right: 14px;
  cursor: pointer;
  transition: background 0.3s;
}
.f-file::file-selector-button:hover { background: var(--rose-dark); }
.f-err { font-size: 12px; color: #C0392B; display: none; }
.f-err.show { display: block; }
.f-hint { font-size: 12px; color: var(--topo); }
.form-error, .form-success-inline {
  font-size: 13px;
  padding: 12px 16px;
  border-radius: 10px;
  display: none;
  margin-bottom: 16px;
}
.form-error.show { display: block; background: #FBEAEA; color: #C0392B; }
.form-success-inline:not(.is-hidden) { display: block; background: #E9F3EC; color: #2E7D4F; }
.gdpr-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.gdpr-box { margin-top: 3px; accent-color: var(--rose); }
.gdpr-txt { font-size: 12px; color: var(--topo); line-height: 1.5; }
.gdpr-txt a { color: var(--rose); }
.f-err-gdpr { font-size: 12px; color: #C0392B; display: none; margin: -10px 0 16px; }
.f-err-gdpr.show { display: block; }
.form-card {
  background: var(--white);
  border: 1px solid var(--nude);
  border-radius: 20px;
  padding: 44px;
  max-width: 640px;
  margin: 0 auto;
}

/* ── NAV — siempre opaco (no transparente sobre el hero, a diferencia
   del diseño original de reprogramatubelleza.com que causaba problemas
   de contraste). ── */
#mainNav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(251,246,244,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--nude);
  transition: padding 0.4s var(--ease);
}
#mainNav.scrolled { padding: 12px 60px; }
.nav-logo {
  display: flex;
  align-items: center;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--mauve);
  text-decoration: none;
}
.nav-logo em { font-style: normal; color: var(--rose); }
.nav-logo-img {
  height: 52px;
  width: 52px;
  object-fit: contain;
  display: block;
}
.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-links a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: var(--mauve);
  position: relative;
  transition: color 0.3s;
}
.nav-links a:hover, .nav-links a.is-active { color: var(--rose); }
.nav-cta { flex-shrink: 0; }
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  min-width: 44px;
  min-height: 44px;
}
.nav-hamburger span { width: 24px; height: 2px; background: var(--mauve); transition: all 0.3s; }
.mobile-nav {
  position: fixed;
  top: 0; right: -100%;
  width: min(320px, 85vw);
  height: 100vh;
  background: var(--ivory);
  z-index: 200;
  padding: 100px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: right 0.4s var(--ease);
  box-shadow: -10px 0 30px rgba(46,42,40,0.1);
}
.mobile-nav.is-open { right: 0; }
.mobile-nav a { text-decoration: none; color: var(--mauve); font-size: 16px; font-weight: 500; display: block; padding: 9px 0; }
.nav-spacer { height: 84px; }

/* Avatar junto al nombre en el enlace "Mi cuenta" del nav (desktop y móvil). */
.nav-avatar-link { display: inline-flex; align-items: center; gap: 8px; }
.nav-avatar, .nav-avatar-placeholder {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nav-avatar { display: block; object-fit: cover; }
.nav-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blush);
  color: var(--rose);
  font-family: var(--display);
  font-size: 12px;
}
.mobile-nav .nav-avatar,
.mobile-nav .nav-avatar-placeholder { width: 32px; height: 32px; }
.mobile-nav .nav-avatar-placeholder { font-size: 18px; }

/* Menú "Perfil de usuario / Panel de administración / Cerrar sesión" bajo
   el avatar del nav — solo cuentas admin (ver sn_construirDropdownCuenta()
   en main.js). */
.nav-avatar-dropdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--white);
  border: 1px solid var(--nude);
  box-shadow: 0 8px 24px rgba(46,42,40,0.14);
  border-radius: 12px;
  padding: 8px;
  min-width: 200px;
}
.nav-avatar-dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cacao);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.nav-avatar-dropdown a:hover { background: var(--blush); color: var(--rose); }
.nav-avatar-dropdown-salir { border-top: 1px solid var(--nude); margin-top: 4px; padding-top: 12px !important; }
.nav-links li:has(.nav-avatar-dropdown) { position: relative; }
.nav-links .nav-avatar-dropdown { position: absolute; top: calc(100% + 14px); right: 0; z-index: 110; }
.mobile-nav .nav-avatar-dropdown { align-items: center; margin-top: -16px; }

/* ── HERO ──
   min-height ajustado (era 92vh) y hero-photo-wrap menos alto (era 4/5,
   una proporción muy vertical) para que la sección quepa dentro del primer
   pantallazo en vez de obligar a hacer scroll para verla completa. */
.hero {
  min-height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  padding: 104px 60px 60px;
}
.hero-copy { max-width: 560px; }
.hero-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.18;
  color: var(--mauve);
  margin: 18px 0 20px;
}
.hero-title em { font-style: italic; color: var(--rose); }
.hero-sub { font-size: 17px; color: var(--topo); margin-bottom: 34px; max-width: 480px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-photo-wrap {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 1/1;
  max-height: 60vh;
  background: var(--blush);
}
.hero-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo-badge {
  position: absolute;
  bottom: 24px; left: 24px;
  background: var(--white);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 12px 30px rgba(46,42,40,0.14);
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-photo-badge-icon { font-family: var(--display); font-size: 22px; color: var(--gold); }
.hero-photo-badge-text { font-size: 12px; color: var(--mauve); line-height: 1.4; }
.hero-photo-badge-text strong { display: block; color: var(--cacao); font-size: 13px; }

/* ── GUÍA DE TRATAMIENTOS ("Encuentra tu tratamiento ideal") ──
   Cada .guide-card es un <button> que despliega/oculta su
   .guide-card-result (acordeón puro CSS+JS, sin backend: el mapeo
   necesidad→servicio vive tal cual en el HTML). */
.guide-tabs { display: flex; justify-content: center; gap: 14px; margin-bottom: 48px; flex-wrap: wrap; }
.guide-tab {
  background: var(--white);
  border: 1px solid var(--nude);
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mauve);
  cursor: pointer;
  transition: all 0.3s;
}
.guide-tab.is-active, .guide-tab:hover { background: var(--rose); border-color: var(--rose); color: var(--white); }
.guide-panel { display: none; }
.guide-panel.is-active { display: block; }
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.guide-card {
  background: var(--white);
  border: 1px solid var(--nude);
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
}
.guide-card-btn {
  width: 100%;
  background: none;
  border: none;
  padding: 24px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  text-align: left;
}
.guide-card-need {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  color: var(--cacao);
}
.guide-card-chevron { font-size: 20px; color: var(--rose); transition: transform 0.3s; flex-shrink: 0; }
.guide-card.is-open .guide-card-chevron { transform: rotate(45deg); }
.guide-card-result {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out);
}
.guide-card.is-open .guide-card-result { max-height: 340px; }
.guide-card-result-inner { padding: 0 26px 26px; }
.guide-card-result-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--rose); margin-bottom: 10px; }
.guide-card-result ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.guide-card-result li {
  font-size: 14px;
  color: var(--mauve);
  padding-left: 22px;
  position: relative;
}
.guide-card-result li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.li-precio { color: var(--topo); font-size: 0.9em; }
.li-precio.is-pendiente { font-style: italic; }
.guide-card-precio-variants { display: flex; flex-direction: column; gap: 4px; }
.guide-card-precio-variant { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.guide-card-variant-label { font-size: 12px; font-weight: 600; color: var(--mauve); white-space: nowrap; }

/* ── SERVICIOS PARA EVENTOS ── */
.event-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.event-card {
  background: var(--white);
  border: 1px solid var(--nude);
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}
.event-card:hover, .event-card.is-active { border-color: var(--rose); box-shadow: 0 10px 24px rgba(183,110,121,0.14); }
.event-card-icon { font-family: var(--display); font-size: 26px; color: var(--gold); margin-bottom: 10px; }
.event-card-label { font-size: 13px; font-weight: 600; color: var(--mauve); }
.event-result {
  margin-top: 36px;
  background: var(--white);
  border: 1px solid var(--nude);
  border-radius: 18px;
  padding: 32px 36px;
  display: none;
}
.event-result.is-active { display: block; }
.event-result-title { font-family: var(--display); font-size: 20px; color: var(--cacao); margin-bottom: 14px; }
.event-result ul { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.event-result li { font-size: 14px; color: var(--mauve); padding-left: 22px; position: relative; }
.event-result li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.event-result-footer { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 20px; }

/* ── TARJETAS REGALO ── */
.gift-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.gift-card {
  background: var(--white);
  border: 1px solid var(--gold-light);
  border-radius: 20px;
  padding: 34px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.gift-card-title { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--mauve); }
.gift-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.gift-card li { font-size: 13px; color: var(--topo); padding-left: 20px; position: relative; }
.gift-card li::before { content: '✦'; position: absolute; left: 0; color: var(--gold); font-size: 11px; }
.gift-card-precio { display: flex; align-items: baseline; gap: 10px; min-height: 28px; }
.gift-card-precio-original { font-size: 14px; color: var(--topo); text-decoration: line-through; }
.gift-card-precio-final { font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--rose-dark); }
.gift-card-precio.is-pendiente { font-size: 13px; font-style: italic; color: var(--topo); }

/* ── CATÁLOGO DE SERVICIOS ── */
.catalog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; }
.catalog-group { background: var(--white); border: 1px solid var(--nude); border-radius: 18px; padding: 32px 34px; }
.catalog-group-title {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  color: var(--rose);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--nude);
}
.catalog-group ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.catalog-group li { font-size: 14px; color: var(--cacao); }
.catalog-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.catalog-item-nombre { flex: 1; }
.catalog-item-precio { font-weight: 600; color: var(--rose-dark); white-space: nowrap; }
.catalog-item-precio.is-pendiente { font-weight: 400; font-style: italic; color: var(--topo); }

/* ── GALERÍA / TRABAJOS REALIZADOS ──
   .gallery-grid se reutiliza tal cual en el teaser del index (6-8 fotos)
   y en /galeria/ (las 52) — mismo marcado, mismo lightbox. Cada foto es
   un <button> (no <a>) porque abre el lightbox vía JS, no navega. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.gallery-item {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--blush);
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(46,42,40,0.28), transparent 45%);
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-teaser-cta { text-align: center; margin-top: 48px; }

/* ── INVITACIÓN AL BLOG ── */
.blog-invite-cta { text-align: center; }

/* Lightbox — overlay a pantalla completa, se reutiliza en cualquier
   página que tenga .gallery-grid; oculto con opacity+pointer-events (no
   display:none) para poder animar la entrada/salida. */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(46,42,40,0.94);
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.lightbox.is-open { opacity: 1; pointer-events: all; }
.lightbox-img {
  max-width: 88vw; max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--white);
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.3s;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.28); }
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-counter {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: var(--white); font-size: 13px; letter-spacing: 1px; opacity: 0.85;
}

/* ── RESERVAR CITA ── */
#reservar { background: var(--blush); }
.horarios-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.horario-btn {
  background: var(--white);
  border: 1px solid var(--nude);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--mauve);
  cursor: pointer;
  transition: all 0.25s;
}
.horario-btn:hover:not(:disabled) { border-color: var(--rose); color: var(--rose); }
.horario-btn.is-selected { background: var(--rose); border-color: var(--rose); color: var(--white); }
.horario-btn:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }

/* ── CONTACTO ── */
.contact-info { display: flex; flex-direction: column; gap: 22px; }
.contact-info-item { display: flex; gap: 16px; align-items: flex-start; }
.contact-info-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--blush);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  color: var(--rose);
  flex-shrink: 0;
}
.contact-info-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--topo); }
.contact-info-value { font-size: 15px; color: var(--cacao); font-weight: 500; }
.contact-info-value a { text-decoration: none; color: var(--cacao); }
.contact-info-value a:hover { color: var(--rose); }
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: start; }

/* ── FOOTER ── */
footer.site-footer {
  background: var(--mauve);
  color: var(--blush);
  padding: 70px 60px 30px;
  text-align: center;
}
.footer-logo { font-family: var(--display); font-size: 22px; margin-bottom: 14px; }
.footer-social { display: flex; justify-content: center; gap: 14px; margin: 18px 0; }
.footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--blush);
  background: rgba(255,255,255,0.12);
  transition: transform 0.2s var(--ease-out), background 0.2s, color 0.2s;
}
.footer-social-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.footer-social-btn:hover { transform: translateY(-2px); color: var(--white); background: rgba(255,255,255,0.22); }
.footer-links { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin: 20px 0; }
.footer-links a { font-size: 12px; text-decoration: none; color: var(--blush); opacity: 0.85; }
.footer-links a:hover { opacity: 1; }
.footer-fine { font-size: 12px; opacity: 0.7; margin-top: 30px; }
.footer-fine a { color: var(--gold-light); }

/* ── PÁGINAS LEGALES (aviso legal, privacidad, cookies) ── */
.legal-hero { padding: 150px 60px 50px; text-align: center; }
.legal-hero h1 { font-family: var(--display); font-size: clamp(30px, 4vw, 44px); color: var(--mauve); margin-top: 14px; }
.legal-content { max-width: 760px; margin: 0 auto; padding: 20px 24px 100px; }
.legal-content h2 { font-family: var(--display); font-size: 22px; color: var(--mauve); margin: 34px 0 14px; }
.legal-content p, .legal-content li { font-size: 15px; color: var(--topo); line-height: 1.8; margin-bottom: 12px; }
.legal-content ul { padding-left: 20px; }
.legal-updated { font-size: 13px; color: var(--topo); }

/* ── EXTERNOS FLOTANTES (WhatsApp/Instagram) ──
   Mismo patrón que reprogramatubelleza.com: .js-external-tap +
   window.open manual (fiabilidad en iOS Safari/PWA). */
.floating-buttons { position: fixed; bottom: 24px; right: 24px; z-index: 90; display: flex; flex-direction: column; gap: 12px; }
.floating-btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(46,42,40,0.2);
  transition: transform 0.3s;
}
.floating-btn:hover { transform: scale(1.08); }
.floating-btn svg { width: 26px; height: 26px; }
.floating-btn.is-whatsapp { background: #25D366; }
.floating-btn.is-instagram { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4); }

/* ════════════════════════════════════════
   MI CUENTA / PANEL ADMIN (/cuenta/)
════════════════════════════════════════ */
.wrap-xs { max-width: 480px; margin: 0 auto; padding: 0 24px; }
.account-tabs { display: flex; gap: 10px; margin-bottom: 28px; }
.account-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid var(--nude);
  padding: 12px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--topo);
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.account-tab.is-active { color: var(--rose); border-color: var(--rose); }
.account-forgot-link { text-align: center; margin-top: 16px; }
.link-btn { background: none; border: none; color: var(--rose); font-size: 12px; cursor: pointer; text-decoration: underline; }

.form-success {
  background: var(--white);
  border: 1px solid var(--nude);
  border-radius: 20px;
  padding: 44px;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.form-success-sym { font-family: var(--display); font-size: 30px; color: var(--gold); margin-bottom: 10px; }
.form-success-title { font-family: var(--display); font-size: 22px; color: var(--mauve); margin-bottom: 8px; }
.form-success-sub { font-size: 14px; color: var(--topo); margin-bottom: 22px; }
.account-support-note { font-size: 12px; color: var(--topo); margin-top: 20px; }
.account-support-note a { color: var(--rose); }

.cuenta-panel-switch { display: flex; justify-content: center; gap: 10px; margin: 0 auto 40px; max-width: 360px; }
.cuenta-panel-tab {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--nude);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--mauve);
  cursor: pointer;
  transition: all 0.3s;
}
.cuenta-panel-tab.is-active { background: var(--rose); border-color: var(--rose); color: var(--white); }

.admin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; padding-top: 8px; padding-bottom: 100px; }
.admin-card { background: var(--white); border: 1px solid var(--nude); border-radius: 20px; padding: 34px; min-width: 0; }
.admin-card.is-full-width { grid-column: 1 / -1; }
.admin-card.is-narrow { max-width: 640px; margin: 32px auto 0; }

/* Mis datos (izquierda, ocupa las dos filas) + Mis reservas / Novedades
   del Blog apiladas a la derecha — las .admin-card.is-narrow de dentro
   pierden su propio max-width/centrado porque aquí el ancho ya lo fija
   la columna del grid. */
.cuenta-perfil-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1100px; margin: 32px auto 0; align-items: start; }
.cuenta-perfil-grid .admin-card.is-narrow { max-width: none; margin: 0; }
.cuenta-perfil-grid #perfilWrap { grid-column: 1; grid-row: 1 / 3; }
.cuenta-perfil-grid #reservasWrap { grid-column: 2; grid-row: 1; }
.cuenta-perfil-grid #perfilNewsletterWrap { grid-column: 2; grid-row: 2; }
@media (max-width: 1024px) {
  .cuenta-perfil-grid { grid-template-columns: 1fr; }
  .cuenta-perfil-grid #perfilWrap, .cuenta-perfil-grid #reservasWrap, .cuenta-perfil-grid #perfilNewsletterWrap { grid-column: 1; grid-row: auto; }
}

.reservas-list, .admin-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.reserva-item, .admin-list-item {
  background: var(--blush);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.reserva-item-info, .admin-list-item-info { display: flex; flex-direction: column; gap: 4px; }
.reserva-item-titulo, .admin-list-item-titulo { font-family: var(--display); font-size: 15px; color: var(--cacao); }
.reserva-item-detalle, .admin-list-item-detalle { font-size: 12px; color: var(--topo); }
.reserva-item-valorar { font-size: 12px; font-weight: 600; color: var(--gold); text-decoration: none; width: fit-content; }
.reserva-item-valorar:hover { color: var(--rose-dark); text-decoration: underline; }
.reserva-item-estado {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--nude);
  color: var(--mauve);
}
.reserva-item-estado.is-confirmada { background: #DFF0E4; color: #2E7D4F; }
.reserva-item-estado.is-cancelada { background: #FBEAEA; color: #C0392B; }
.admin-list-item-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-list-item-actions .btn { padding: 8px 16px; font-size: 11px; }
.admin-list-item-edit-form { flex-basis: 100%; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--nude); }

/* ── MIS RESERVAS: calendario de 3 meses (mes actual + los 2 siguientes),
   marca en cada uno los días con cita — mismo patrón que
   reprogramatubelleza.com. ── */
.reservas-calendario { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.reservas-cal-mes { background: var(--ivory); border: 1px solid var(--nude); padding: 14px 10px; }
.reservas-cal-titulo {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin-bottom: 10px;
}
.reservas-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.reservas-cal-cab { font-size: 9px; font-weight: 600; color: var(--topo); text-align: center; padding: 2px 0; }
.reservas-cal-dia { font-size: 11px; color: var(--cacao); text-align: center; padding: 4px 0; }
.reservas-cal-dia.tiene-evento {
  font-weight: 700;
  color: var(--white);
  background: var(--gold);
  border-radius: 50%;
}
@media (max-width: 560px) {
  .reservas-calendario { grid-template-columns: 1fr; gap: 20px; }
}

/* ── ESTADO "¿YA VALORASTE EN GOOGLE?" (Mis reservas) ── */
.google-estado {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--blush);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.google-estado p { font-size: 13px; color: var(--mauve); flex: 1; min-width: 160px; }
.google-estado-icono { font-size: 20px; color: var(--gold); flex-shrink: 0; }

/* ── MIS FOTOS (perfil de usuario) ── */
.mis-fotos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.mis-fotos-item { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; }
.mis-fotos-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mis-fotos-item-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(46,42,40,0.75));
  color: var(--white);
  font-size: 10px;
  line-height: 1.3;
  padding: 18px 8px 6px;
}

/* Avatar de "Mis datos" — foto real o placeholder con inicial decorativa. */
.profile-avatar-row { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
.profile-avatar, .profile-avatar-placeholder { width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; }
.profile-avatar { display: block; object-fit: cover; object-position: center; }
.profile-avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--blush);
  color: var(--rose);
  font-family: var(--display);
  font-size: 32px;
}
.profile-avatar-upload { flex: 1; min-width: 0; }
.profile-avatar[hidden], .profile-avatar-placeholder[hidden] { display: none; }

/* Grid admin de "Gestión de Galería" — miniaturas con botón eliminar. */
.admin-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.admin-gallery-item { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; }
.admin-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-gallery-item-del {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(46,42,40,0.7);
  color: var(--white);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s;
}
.admin-gallery-item-del:hover { background: #C0392B; }
.admin-gallery-item.is-portada { outline: 3px solid var(--gold); outline-offset: -3px; }
.admin-gallery-item-portada {
  position: absolute; left: 6px; right: 32px; bottom: 6px;
  padding: 4px 8px;
  border-radius: 20px;
  border: none;
  background: rgba(46,42,40,0.75);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.3s;
}
.admin-gallery-item-portada:hover { background: var(--rose); }

/* Grid admin de "Fotos de clientas" — miniaturas con leyenda
   (clienta/servicio/fecha) sobre el mismo .admin-gallery-item de arriba. */
.admin-gallery-item-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(46,42,40,0.8));
  color: var(--white);
  font-size: 10px;
  line-height: 1.35;
  padding: 22px 8px 6px;
}
.admin-gallery-item-caption strong { display: block; font-size: 11px; }

/* ── TESTIMONIOS (público, index) ── */
/* auto-fit + minmax fijo (no 1fr) para que, con pocos testimonios, las
   tarjetas se centren en vez de quedar pegadas a la izquierda con un
   hueco enorme al lado — reemplaza los ajustes manuales por breakpoint
   que tenía antes (repeat(2,1fr) / 1fr), ya innecesarios: con este
   minmax cabe la misma cantidad de columnas en cada ancho. */
.testimonios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 320px)); justify-content: center; gap: 22px; }
.testimonio-card { background: var(--white); border: 1px solid var(--nude); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.testimonio-card-foto { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; }
.testimonio-card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.testimonio-card-texto { font-size: 14px; color: var(--mauve); font-style: italic; flex: 1; }
.testimonio-card-texto::before { content: '“'; }
.testimonio-card-texto::after { content: '”'; }
.testimonio-card-nombre { font-family: var(--display); font-size: 15px; color: var(--rose-dark); }

/* ── TESTIMONIOS (admin, /cuenta/) — reutiliza .admin-list-item ── */
.admin-list-item-foto { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.admin-list-item-estado.is-pendiente { background: var(--nude); color: var(--mauve); }
.admin-list-item-estado.is-aprobado { background: #DFF0E4; color: #2E7D4F; }
.admin-list-item-estado.is-rechazado { background: #FBEAEA; color: #C0392B; }
.admin-gallery-item-portada:disabled { background: var(--gold); color: var(--cacao); cursor: default; }

.dias-semana-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dia-check { display: flex; align-items: center; gap: 6px; background: var(--blush); border-radius: 10px; padding: 8px 12px; }
.dia-check label { font-size: 12px; color: var(--mauve); }
.dia-check input { accent-color: var(--rose); }

.admin-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; }
/* Alta manual de suscriptor del Blog: input + botón en la misma fila. */
.admin-inline-form { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 20px; }
.admin-inline-form .f-group { flex: 1; margin-bottom: 0; }
.admin-inline-form .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 480px) {
  .admin-inline-form { flex-direction: column; align-items: stretch; }
}
.admin-stat-total { font-family: var(--display); font-size: 20px; color: var(--rose); margin: 0; }
.admin-stat-total strong { color: var(--cacao); }
.perfil-newsletter { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--nude); }

/* ════════════════════════════════════════
   BLOG (público — blog/index.php, blog/articulo.php)
════════════════════════════════════════ */
.blog-list-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px 100px; }
.blog-list-vacio { text-align: center; padding: 40px 24px 60px; }
/* minmax con tope fijo (no 1fr) + justify-content:center: con pocos
   artículos publicados, las tarjetas se centran en vez de quedar
   pegadas a la izquierda con un hueco vacío al lado. */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 340px)); justify-content: center; gap: 32px; }
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--nude);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(46,42,40,0.1); }
/* La tarjeta entera era un único <a> — se dividió en .blog-card-link (solo
   la imagen+texto, para que siga siendo "toda la tarjeta clicable" al
   artículo) y .blog-card-share como hermano, aparte, porque un <a> con
   botones de compartir dentro de otro <a> es HTML inválido y el navegador
   rompe la estructura del enlace. */
.blog-card-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.blog-card-img { width: 100%; aspect-ratio: 16/10; overflow: hidden; background: var(--blush); }
/* contain (no cover): la imagen destacada se ve siempre entera, sin
   recortar la cara — mismo criterio que la foto de perfil. */
.blog-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.blog-card-img-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-style: italic; font-size: 40px;
  color: var(--rose-light);
}
.blog-card-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card-categoria { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--mauve); font-weight: 500; }
.blog-card-titulo { font-family: var(--display); font-size: 22px; font-weight: 500; color: var(--cacao); line-height: 1.25; }
.blog-card-extracto { font-size: 14px; line-height: 1.7; color: var(--topo); flex: 1; }
.blog-card-fecha { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--rose); margin-top: auto; }

.blog-card-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0 24px 22px; }
.blog-share-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--topo); margin-right: 2px; }
/* Botones circulares solo-icono; cada red hace hover con su color de
   marca; "Copiar enlace" usa --gold (acento premium del sitio) al no tener
   color de marca propio. */
.blog-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--mauve);
  background: var(--blush);
  border: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), background 0.2s, color 0.2s;
}
.blog-share-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.blog-share-btn:hover { transform: translateY(-2px); color: var(--white); }
.blog-share-btn.is-whatsapp:hover { background: #25D366; }
.blog-share-btn.is-facebook:hover { background: #1877F2; }
.blog-share-btn.is-x:hover { background: #000; }
.blog-share-copy:hover { background: var(--gold); }
.blog-article-share {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--nude);
}

.blog-article-hero h1 { max-width: 760px; margin: 14px auto 0; }
.blog-article-img { margin-bottom: 40px; background: var(--blush); border-radius: 18px; overflow: hidden; }
.blog-article-img img { width: 100%; height: auto; max-height: 480px; object-fit: contain; display: block; margin: 0 auto; }
.blog-article-body h2 { font-family: var(--display); font-weight: 500; font-size: 23px; color: var(--cacao); margin: 32px 0 16px; }
.blog-article-body h3 { font-family: var(--display); font-weight: 500; font-size: 20px; color: var(--cacao); margin: 28px 0 14px; }
.blog-article-body h4 { font-family: var(--body); font-weight: 600; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--mauve); margin: 24px 0 12px; }
.blog-article-body p { font-size: 16px; line-height: 1.9; color: var(--topo); margin-bottom: 18px; }
.blog-article-body ul, .blog-article-body ol { padding-left: 22px; margin-bottom: 18px; color: var(--topo); }
.blog-article-body li { font-size: 16px; line-height: 1.85; margin-bottom: 8px; }
.blog-article-body strong { color: var(--cacao); font-weight: 500; }
.blog-article-body a { color: var(--rose); text-decoration-color: rgba(183,110,121,0.4); }
.blog-article-body a:hover { color: var(--rose-dark); }
.blog-article-body blockquote {
  border-left: 2px solid var(--rose);
  padding: 4px 0 4px 20px;
  margin: 28px 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 19px;
  color: var(--cacao);
}
.blog-article-cta {
  background: var(--blush);
  border-top: 2px solid var(--rose);
  border-radius: 18px;
  padding: 44px 36px;
  margin: 48px 0 32px;
  text-align: center;
}
.blog-article-cta h2 { font-family: var(--display); font-weight: 300; font-size: clamp(24px, 3vw, 34px); color: var(--mauve); margin: 8px 0 14px; }
.blog-article-cta p { max-width: 480px; margin: 0 auto 24px; }
.blog-article-cta-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.blog-article-back { text-align: center; margin-top: 24px; }
.blog-newsletter { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--nude); }
.blog-newsletter-titulo { font-size: 13px; font-weight: 600; color: var(--cacao); margin-bottom: 14px; text-align: center; }
.blog-newsletter-row { display: flex; gap: 10px; margin-bottom: 6px; }
.blog-newsletter-row .f-input { flex: 1; }
.blog-newsletter-row .btn { flex-shrink: 0; padding: 0 26px; white-space: nowrap; }
.blog-newsletter .gdpr-row { margin-top: 12px; }
.blog-newsletter .gdpr-txt { font-size: 11px; }

/* ════════════════════════════════════════
   GESTIÓN DEL BLOG (/cuenta/, solo visible si esAdmin)
   Editor de texto enriquecido casero (contenteditable + execCommand) — sin
   dependencias externas. El HTML que produce se sanea en el servidor
   (sn_sanitizar_html_articulo) antes de guardarse.
════════════════════════════════════════ */
.rte-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; background: var(--blush); border: 1px solid var(--nude); border-radius: 10px 10px 0 0; border-bottom: none; }
.rte-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  border: 1px solid var(--nude);
  color: var(--cacao);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.rte-btn:hover { background: var(--rose); color: var(--white); border-color: var(--rose); }
.rte-btn.is-active { background: var(--rose-dark); color: var(--white); border-color: var(--rose-dark); }
.rte-editor {
  min-height: 220px;
  max-height: 480px;
  overflow-y: auto;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--nude);
  border-radius: 0 0 10px 10px;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--cacao);
}
.rte-editor:focus { outline: 2px solid var(--rose); outline-offset: -2px; }
.rte-editor h2, .rte-editor h3, .rte-editor h4 { font-family: var(--display); color: var(--cacao); margin: 14px 0 8px; }
.rte-editor p { margin-bottom: 10px; }
.rte-editor ul, .rte-editor ol { padding-left: 24px; margin-bottom: 10px; }
.rte-editor blockquote { border-left: 2px solid var(--rose); padding-left: 16px; font-style: italic; color: var(--mauve); margin: 12px 0; }
.rte-editor a { color: var(--rose); }
.rte-editor:empty::before { content: attr(data-placeholder); color: var(--topo); opacity: 0.6; }
.rte-contador { margin: 6px 0 0; font-size: 12px; color: var(--topo); text-align: right; }
.rte-contador.is-excedido { color: #C0392B; font-weight: 600; }

.blog-admin-estado {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  margin-left: 8px;
  border: 1px solid var(--rose);
  border-radius: 20px;
  color: var(--rose);
}
.blog-admin-estado.is-publicado { border-color: #4C7A50; color: #4C7A50; }

@media (max-width: 480px) {
  .blog-newsletter-row { flex-direction: column; }
  .blog-newsletter-row .btn { padding: 16px; }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-article-cta { padding: 32px 20px; }
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; padding-top: 96px; }
  .hero-photo-wrap { max-height: 50vh; }
  .admin-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 100%; }
  .guide-grid, .event-grid, .gift-grid, .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 860px) {
  #mainNav { padding: 16px 24px; }
  #mainNav.scrolled { padding: 12px 24px; }
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .wrap { padding: 0 24px; }
  .hero { padding: 88px 24px 48px; }
  .hero-photo-wrap { max-height: 42vh; }
  .section-gap, .section-gap-alt { padding: 70px 0; }
  .event-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .guide-grid, .gift-grid, .catalog-grid, .event-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .event-result ul { grid-template-columns: 1fr; }
  .f-row { grid-template-columns: 1fr; }
  .form-card { padding: 30px 22px; }
  footer.site-footer { padding: 50px 24px 24px; }
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; font-size: 16px; }
  .lightbox-close { top: 12px; right: 12px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .admin-gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .profile-avatar-row { gap: 16px; }
  .profile-avatar, .profile-avatar-placeholder { width: 64px; height: 64px; }
  .mis-fotos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}