/* ════════════════════════════════════════════════════════════
   Mónica Arboleda · Centro Estético
   components.css — secciones, carta de servicios, formulario,
   footer, flotantes y chat. Sistema "Atelier" editorial.
   ════════════════════════════════════════════════════════════ */

/* ── 1. Andamiaje de secciones ────────────────────────────── */

.section { padding-block: var(--section-y); }

.section-head {
  max-width: 70ch;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.section-head h2 { margin-bottom: var(--sp-6); }
.section-head .lead { margin-bottom: 0; }

/* ── 2. Sobre Mónica (banda arena) ────────────────────────── */

.about { background: var(--bg-band); }

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.about-copy .section-head { margin-bottom: var(--sp-8); }

/* Composición editorial en capas: retrato + detalle solapado + insignia */
.about-media {
  position: relative;
  max-width: 480px;
}

/* Retrato principal: vertical, arco arriba (eco del sello) */
.media-main {
  position: relative;
  margin: 0;
  z-index: 1;
}
.media-main img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 220px 220px var(--r-l) var(--r-l);
}
.media-main::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid var(--line);
  border-radius: 232px 232px calc(var(--r-l) + 8px) calc(var(--r-l) + 8px);
  pointer-events: none;
}

/* Foto de detalle que solapa la esquina inferior derecha: capas y profundidad */
.media-sub {
  position: absolute;
  right: -7%;
  bottom: 7%;
  width: 46%;
  margin: 0;
  z-index: 2;
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: 0 0 0 7px var(--bg-band), var(--shadow-m);
}
.media-sub img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Insignia de experiencia, flotando arriba-izquierda (diagonal con el detalle) */
.about-badge {
  position: absolute;
  left: -24px;
  top: 7%;
  z-index: 3;
  width: 112px;
  height: 112px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .1rem;
  background: var(--accent-deep);
  color: #FFFFFF;
  border-radius: 50%;
  font-size: .66rem;
  line-height: 1.25;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: var(--sp-3);
  box-shadow: 0 0 0 6px var(--bg-band), var(--shadow-m);
}
.about-badge strong {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0;
}

.about-pillars {
  list-style: none;
  margin: var(--sp-8) 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.about-pillars { counter-reset: pilar; }
.about-pillars li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: var(--sp-4);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--line);
}
.about-pillars li:last-child { border-bottom: 1px solid var(--line); }
/* Numeral editorial: ocupa la columna izquierda, alineado con el título */
.about-pillars li::before {
  counter-increment: pilar;
  content: counter(pilar, decimal-leading-zero);
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-size: .95rem;
  font-style: italic;
  color: var(--accent);
  padding-top: .15em;
}
.about-pillars h3 {
  grid-column: 2;
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-1);
}
.about-pillars p { grid-column: 2; }
.about-pillars p {
  font-size: .98rem;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 899px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .about-media { max-width: 420px; margin-inline: auto; }
  .about-badge { left: -8px; width: 98px; height: 98px; }
}
@media (max-width: 479px) {
  /* En pantallas muy estrechas la foto de detalle no debe desbordar */
  .media-sub { right: 0; width: 44%; }
  .about-badge { left: 0; }
}

/* ── 3. Servicios — grilla estática de cards ──────────────── */

.services-head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.services-head .section-head { margin-bottom: 0; }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.svc-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border-radius: var(--r-m);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-s);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-m);
}

.svc-cat {
  align-self: flex-start;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--c-aqua);
  padding: .35em .85em;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-4);
}
.svc-name {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  font-weight: 600;
  white-space: nowrap;
  margin: 0 0 var(--sp-3);
}
.svc-desc {
  font-size: .96rem;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 1279px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-name { white-space: normal; }
}
@media (max-width: 599px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── 4. Reserva / Contacto (banda aqua lavada) ────────────── */

.booking { background: var(--c-aqua-pal); }

/* Sin formulario: asistente embebido (FAQ) + CTA a WhatsApp */
.booking-cta {
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.booking-cta .section-head { margin-bottom: var(--sp-8); }
.booking-cta .lead { margin-inline: auto; }

/* CTA de reserva bajo el chat: el chat resuelve dudas, WhatsApp agenda */
.booking-cta-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-8);
}
.booking-cta-action p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 500;
  color: var(--text-primary);
}

.chat-form input::placeholder { color: var(--text-secondary); opacity: 1; }
.chat-form input:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/* ── 5. Footer ────────────────────────────────────────────── */

.footer {
  background: var(--bg-raised);
  padding-top: var(--section-y);
  border-top: 1px solid var(--line);
}

/* ── Nivel 1: marca (logo + nombre + tagline) ─────────────── */
.footer-brand {
  padding-bottom: clamp(2.25rem, 5vw, 3.5rem);
}
.footer-lockup {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.footer-brand .brand-mark {
  display: block;
  flex: none;
  width: 52px;
  height: 52px;
}
.footer-name {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
}
.footer-name span {
  display: block;
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: .4rem;
}
.footer-tagline {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 44ch;
  margin: 0;
}

/* ── Nivel 2: columnas de información (alineadas entre sí) ── */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.footer-col h3 {
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-4);
}
.footer-col ul,
.footer-col address {
  display: grid;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text-primary);
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col address { font-style: normal; }
.footer-col a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--accent-deep); }

/* ── Nivel 3: legal ───────────────────────────────────────── */
.footer-legal {
  padding-block: var(--sp-6);
}
.footer-legal p {
  margin: 0;
  font-size: .8rem;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .footer-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }
}

/* ── 6. Botón flotante de WhatsApp ────────────────────────── */

.whatsapp-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  cursor: pointer;
  /* Sombra cálida acorde al verde + capa neutra para anclarlo */
  box-shadow: 0 8px 22px -4px rgba(37, 211, 102, .45), 0 3px 9px rgba(11, 51, 38, .18);
  transition: background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.whatsapp-fab svg { width: 32px; height: 32px; }
.whatsapp-fab:hover {
  background: #1EBE57;
  color: #fff;
  box-shadow: 0 10px 28px -4px rgba(37, 211, 102, .52), 0 4px 11px rgba(11, 51, 38, .22);
}
.whatsapp-fab:focus-visible { outline: 2px solid #0B3326; outline-offset: 3px; }

/* ── 7. Asistente virtual embebido (chat con webhook n8n) ──── */

.chat-embed {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  height: min(34rem, 72vh);
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-m);
  overflow: hidden;
}

/* Barra de identidad estilo WhatsApp: avatar + nombre + "en línea" */
.chat-embed-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6);
  background: var(--accent-deep);
}
.chat-embed-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-color: rgba(255, 255, 255, .3);
}
.chat-embed-id {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.1;
  color: #FFFFFF;
}
.chat-embed-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .8);
}
.chat-embed-dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34D399;
}
@media (prefers-reduced-motion: no-preference) {
  .chat-embed-dot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #34D399;
    animation: dot-pulse 2.2s var(--ease-out) infinite;
  }
  @keyframes dot-pulse {
    0%   { transform: scale(1); opacity: .6; }
    100% { transform: scale(2.6); opacity: 0; }
  }
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6);
  background: var(--bg-page);
}
.chat-msg {
  max-width: 85%;
  margin: 0;
  padding: .65rem .9rem;
  border-radius: 16px;
  font-size: .92rem;
  line-height: 1.45;
  overflow-wrap: break-word;
}
.chat-msg--bot {
  align-self: flex-start;
  background: var(--c-aqua);
  color: var(--text-primary);
  border-bottom-left-radius: 5px;
}
.chat-msg--user {
  align-self: flex-end;
  background: var(--accent-deep);
  color: #FFFFFF;
  border-bottom-right-radius: 5px;
}
.chat-msg.is-typing { color: var(--text-secondary); font-style: italic; }

.chat-form {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--bg-raised);
  border-top: 1px solid var(--line-soft);
}
.chat-form input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--text-primary);
  background: var(--c-bruma);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-full);
  padding: .7em 1.2em;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.chat-form input:focus {
  outline: none;
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 3px rgba(89, 89, 84, .18);
}
.chat-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--accent-deep);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.chat-send:hover { background: var(--c-acero-noche); }
.chat-send:disabled { opacity: .6; cursor: default; }