/* Magda Sweet Cakes — capa de refinamientos de diseño.
   Se carga DESPUÉS de site.css. Solo añade/ajusta; no reescribe el sistema.
   Todos los valores salen de los tokens del design system. */

/* 1 · Cabecera destacada en verde oscuro translúcido (Apple §12) */
.site-header {
  background: rgba(0, 56, 49, 0.86);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(249, 219, 214, 0.18);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
/* Columnas simétricas SIEMPRE → el logo queda centrado respecto a la pantalla,
   sin importar el ancho del hamburguesa (izq.) ni de las acciones (der.). */
.site-header__inner { grid-template-columns: 1fr auto 1fr; padding-top: 5px; padding-bottom: 5px; }
.nav-toggle { justify-self: start; color: var(--magda-rosa-claro); }
.brand-logo { justify-self: center; }
.brand-logo img { height: 77px; }
.header-actions { justify-self: end; }
/* Enlaces en claro sobre el verde */
.nav a { color: var(--magda-rosa-claro); }
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--magda-rojo); }
.langswitch a { color: var(--magda-rosa-claro); }
.langswitch a:hover { color: #fff; }
.langswitch span { color: rgba(249, 219, 214, 0.4); }
/* En móvil el menú desplegable tiene fondo crema: allí los enlaces van oscuros */
.nav.is-open { background: var(--surface-page); }
.nav.is-open a { color: var(--magda-verde-oscuro); }
.nav.is-open a:hover { color: var(--magda-rojo); }

/* 2 · Badge de prueba social reutilizable */
.rating-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); padding: 8px 16px; box-shadow: var(--shadow-card); }
.rating-badge .stars { color: var(--magda-caramelo); letter-spacing: 2px; font-size: 14px; line-height: 1; }
.rating-badge small { font-family: var(--font-sans); font-size: 12.5px; color: var(--text-body); }
.rating-badge strong { color: var(--text-heading); }

/* 3 · Tarjetas de servicio / galería con elevación (Apple §1-3, feedback directo) */
a.offer, a.gfig { text-decoration: none; color: inherit; }
a.offer { border-radius: 20px; padding: 10px 10px 22px; }
a.offer h3 { transition: color var(--duration-fast) var(--ease-soft); }
a.offer .link-arrow { justify-content: center; }
a.gfig { display: flex; flex-direction: column; gap: 13px; }
a.gfig .arch img { transition: transform 0.55s var(--ease-soft); }
@media (hover: hover) and (pointer: fine) {
  a.offer:hover, a.gfig:hover { text-decoration: none; }
  a.offer:hover h3 { color: var(--magda-rojo); }
  a.gfig:hover .arch img { transform: scale(1.05); }
}

/* 4 · Foco visible con el verde del token (el sistema lo define verde) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, .control:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 3px;
}

/* 5 · FAQ: el signo gira en vez de sustituirse; respuesta con fade */
.faq__item summary .sign { transition: transform var(--duration-base) var(--ease-soft); }
.faq__item[open] summary .sign { transform: rotate(180deg); }
.faq__item summary:hover { color: var(--magda-rojo); }
.faq__a { animation: faqIn var(--duration-base) var(--ease-soft); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* 6 · Formulario: fila de confianza y aside pegajoso */
.trust-badges { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 18px; margin-bottom: var(--space-7); }
.trust-badges .tb { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 12.5px; color: var(--text-body); background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); padding: 7px 14px; }
@media (min-width: 981px) { .form-grid aside { position: sticky; top: 96px; } }

/* 7 · Respeto por reduced-motion (Apple §14) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .card-link:hover, a.offer:hover, a.gfig:hover { transform: none; }
  a.gfig:hover .arch img { transform: none; }
  .motion-section, .motion-item { opacity: 1 !important; transform: none !important; }
  .site-header--minimal { transform: none !important; }
}

/* 8 · Hamburguesa → X (las 3 barras giran/desaparecen en vez de quedarse fijas) */
.nav-toggle__bar { transition: transform var(--duration-fast) var(--ease-soft), opacity var(--duration-fast) var(--ease-soft); transform-origin: center; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar--top { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar--mid { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar--bottom { transform: translateY(-6px) rotate(-45deg); }

/* 9 · Formulario de presupuesto: del envío al éxito sin salto */
.form-grid { transition: opacity var(--duration-fast) var(--ease-soft), transform var(--duration-fast) var(--ease-soft); }
.form-grid.is-fading { opacity: 0; transform: translateY(-8px); }
.form-success { opacity: 0; transform: translateY(8px); transition: opacity var(--duration-base) var(--ease-soft), transform var(--duration-base) var(--ease-soft); }
.form-success.is-visible { opacity: 1; transform: none; }

/* 11 · Filtro de la galería: las fotos que no encajan se desvanecen en vez de desaparecer en seco */
[data-style] { transition: opacity var(--duration-base) var(--ease-soft), transform var(--duration-base) var(--ease-soft); }
[data-style].is-filtered-out { opacity: 0; transform: scale(0.97); pointer-events: none; }

/* 12 · Aparición editorial: solo contenido de marketing bajo el pliegue. */
.motion-section:not(.has-motion-items),
.motion-item {
  opacity: 0;
  transform: translateY(8px);
}
.motion-section:not(.has-motion-items) {
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.motion-item {
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.motion-section.is-visible:not(.has-motion-items),
.motion-section.is-visible .motion-item {
  opacity: 1;
  transform: none;
}
.motion-delay-1 { transition-delay: 50ms; }
.motion-delay-2 { transition-delay: 100ms; }
.motion-delay-3 { transition-delay: 150ms; }

@media (max-width: 720px) {
  .brand-logo img { height: 65px; }
}