/* =============================================================
   ALHAMBRA MEDIA — Design System
   Complementa Tailwind CSS (CDN). Aquí solo lo que Tailwind
   utilities no cubren limpiamente: tipografía fina, texturas
   de marca, placeholders de imagen y animaciones de scroll.
   ============================================================= */

/* -------------------------------------------------------------
   0. Transiciones entre páginas (View Transitions API nativa)
   ------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-old(root) { animation-name: am-fade-out; }
::view-transition-new(root) { animation-name: am-fade-in; }
@keyframes am-fade-out { to { opacity: 0; } }
@keyframes am-fade-in { from { opacity: 0; } }

/* -------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------- */
:root {
  --am-taupe: #746D69;
  --am-greige: #C9BCAB;
  --am-cream: #EDE5D8;
  --am-graphite: #2B2826;
  --am-bronze: #B8A082;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* -------------------------------------------------------------
   2. Base
   ------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background-color: var(--am-cream);
  color: var(--am-graphite);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection {
  background: var(--am-bronze);
  color: var(--am-cream);
}

:focus-visible {
  outline: 1px solid var(--am-bronze);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  text-wrap: balance;
  letter-spacing: -0.01em;
}

p { text-wrap: pretty; }

/* -------------------------------------------------------------
   3. Utilities de marca
   ------------------------------------------------------------- */

/* Kicker / eyebrow tipográfico — "PROPUESTA DE VALOR", "NIVEL 01" */
.am-kicker {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--am-taupe);
}
/* Variante para texto sobre fotografía — contraste garantizado */
.am-kicker--on-image {
  color: var(--am-cream);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

/* Línea fina decorativa bronce */
.am-hairline {
  height: 1px;
  width: 100%;
  background: linear-gradient(to right, var(--am-bronze), transparent);
}

.am-hairline-center {
  height: 1px;
  width: 3rem;
  background: var(--am-bronze);
}

/* Numeración editorial de servicios: 01 / 02 / 03 */
.am-index-number {
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  color: var(--am-greige);
  -webkit-text-stroke: 1px var(--am-bronze);
  color: transparent;
}

/* Botón primario — sólido grafito */
.btn-am-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 2rem;
  background: var(--am-graphite);
  color: var(--am-cream);
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--am-graphite);
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out), border-color .5s var(--ease-out);
}
.btn-am-primary:hover {
  background: var(--am-bronze);
  border-color: var(--am-bronze);
  color: var(--am-graphite);
}

/* Botón secundario — contorno bronce */
.btn-am-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.9rem;
  background: transparent;
  color: var(--am-graphite);
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--am-bronze);
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out);
}
.btn-am-outline:hover {
  background: var(--am-bronze);
  color: var(--am-cream);
}

/* -------------------------------------------------------------
   4. Placeholders de imagen — "render frames"
   Sustituir el <img> interior por el render/foto real.
   El marco queda listo con proporción, borde y etiqueta técnica.

   ⚠️ ORDEN DE CARGA: en el hero (index.php / en/index.php) este div
   lleva TAMBIÉN las utilidades de Tailwind "absolute inset-0" para
   posicionarse encima del section. Como .render-frame (aquí) y
   .absolute (Tailwind) tienen la misma especificidad, gana la regla
   que se cargue EN ÚLTIMO LUGAR en el <head> — por eso style.css se
   enlaza SIEMPRE DESPUÉS de tailwind.css en todas las páginas (ver
   README.md → "CSS / Tailwind"). Si algún día cambiáis ese orden,
   el hero pierde el position:absolute y la imagen deja de ocupar
   todo el ancho de la sección (bug real detectado en producción el
   22/08/2026). No declarar aquí un "position" que pueda chocar con
   utilidades de Tailwind sin tenerlo muy presente.
   ------------------------------------------------------------- */
.render-frame {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(116,109,105,0.09) 0px, rgba(116,109,105,0.09) 1px, transparent 1px, transparent 14px),
    linear-gradient(160deg, #D8CFC1 0%, #C9BCAB 55%, #B4A692 100%);
  border: 1px solid rgba(184,160,130,0.35);
}
.render-frame picture {
  display: block;
  width: 100%;
  height: 100%;
}
.render-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Armoniza fotografías de orígenes distintos con la paleta cálida de marca */
  filter: saturate(0.85) sepia(0.16) contrast(1.03) brightness(0.98);
}
.render-frame .render-frame__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.1rem;
  background: linear-gradient(to top, rgba(43,40,38,0.55), transparent);
  color: var(--am-cream);
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}
.render-frame .render-frame__corner {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  width: 1.6rem; height: 1.6rem;
  border-top: 1px solid var(--am-bronze);
  border-right: 1px solid var(--am-bronze);
  opacity: 0.85;
}

/* -------------------------------------------------------------
   5. Reveal on scroll
   ------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Defensa: nunca dejar contenido invisible si el JS no corre */
.no-js .reveal,
html:not(.js-ready) .reveal {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------------------
   6. Header / navegación
   ------------------------------------------------------------- */
.am-header {
  /* Fondo 100% opaco y sólido (sin backdrop-filter): el blur en un
     elemento fixed provoca parpadeos/flashes en blanco al hacer scroll
     con rueda en algunas GPUs de Windows, y una opacidad <1 deja
     "sangrar" el contenido oscuro de debajo (texto, patrones) al
     hacer scroll por encima de secciones oscuras. */
  background: #EDE5D8;
}

.am-nav-link {
  position: relative;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--am-graphite);
}
.am-nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0%;
  height: 1px;
  background: var(--am-bronze);
  transition: width .4s var(--ease-out);
}
.am-nav-link:hover::after,
.am-nav-link.is-active::after {
  width: 100%;
}
.am-nav-link.is-active {
  color: var(--am-taupe);
}

/* Menú móvil */
#mobile-menu {
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
#mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Hamburguesa animada */
.am-burger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--am-graphite);
  transition: transform .35s var(--ease-out), opacity .35s var(--ease-out);
}
.am-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.am-burger.is-open span:nth-child(2) { opacity: 0; }
.am-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------------------
   7. Textura hero — halo suave en bronce
   ------------------------------------------------------------- */
.am-halo {
  position: absolute;
  inset: -20% -10% -40% -10%;
  background: radial-gradient(45% 40% at 50% 30%, rgba(184,160,130,0.22), transparent 70%);
  filter: blur(36px);
  pointer-events: none;
  z-index: 0;
}

/* Patrón arquería sutil (evoca el logotipo, uso decorativo de fondo) */
.am-arcade-pattern {
  background-image: radial-gradient(circle at 10px 0, transparent 9px, rgba(184,160,130,0.18) 9px, rgba(184,160,130,0.18) 10px, transparent 10px);
  background-size: 40px 20px;
  background-repeat: repeat-x;
  background-position: bottom;
}

/* -------------------------------------------------------------
   8. Casos de uso — fichas de perfil
   ------------------------------------------------------------- */
.usecase-card {
  position: relative;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.usecase-card:hover {
  transform: translateY(-4px);
}
.usecase-number {
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  color: var(--am-bronze);
  opacity: 0.55;
}

/* -------------------------------------------------------------
   9. Formulario de contacto
   ------------------------------------------------------------- */
.am-field {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(116,109,105,0.4);
  padding: 0.85rem 0.1rem;
  font-family: 'Inter', sans-serif;
  color: var(--am-graphite);
  transition: border-color .35s var(--ease-out);
}
.am-field:focus {
  outline: none;
  border-color: var(--am-bronze);
}
.am-field::placeholder { color: rgba(43,40,38,0.4); }

/* -------------------------------------------------------------
   10. Scrollbar discreto (opcional, no intrusivo)
   ------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--am-cream); }
::-webkit-scrollbar-thumb { background: var(--am-greige); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--am-bronze); }

/* -------------------------------------------------------------
   11. Splash de bienvenida (solo Inicio)
   Doble red de seguridad: la animación CSS termina sola en
   opacity:0 + visibility:hidden aunque JS no llegue a ejecutarse;
   main.js la retira del DOM en cuanto puede y permite saltarla.
   ------------------------------------------------------------- */
.am-splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: var(--am-graphite);
  cursor: pointer;
  animation: am-splash-out 1.3s var(--ease-out) 1.7s forwards;
}
.am-splash__mark {
  width: 112px;
  height: 112px;
  opacity: 0;
  transform: scale(0.85);
  animation: am-splash-mark-in 0.8s var(--ease-out) 0.15s forwards;
}
.am-splash__motto {
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  font-size: 1.35rem;
  letter-spacing: 0.22em;
  color: var(--am-bronze);
  opacity: 0;
  animation: am-splash-text-in 0.8s var(--ease-out) 0.5s forwards;
}
@keyframes am-splash-mark-in { to { opacity: 1; transform: scale(1); } }
@keyframes am-splash-text-in { to { opacity: 1; } }
@keyframes am-splash-out { to { opacity: 0; visibility: hidden; } }

/* Clase que aplica main.js para retirarla del DOM/flujo al instante
   (al terminar la animación, al hacer clic, o como red de seguridad) */
.am-splash.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.9s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  /* La sostenida de 1.7s + fundido es un efecto vistoso pero no
     imprescindible: se acorta a casi instantáneo. */
  .am-splash { animation-delay: 0.2s; animation-duration: 0.3s; }
  .am-splash__mark,
  .am-splash__motto { animation-duration: 0.2s; animation-delay: 0s; }
}

/* -------------------------------------------------------------
   12. FAQ — acordeón nativo (<details>/<summary>, sin JS)
   Contenido siempre presente en el DOM (bueno para SEO/GEO: los
   motores de IA y los rastreadores leen la respuesta aunque esté
   colapsada visualmente) — solo se anima el disclosure y el "+".
   ------------------------------------------------------------- */
.am-faq {
  border-top: 1px solid rgba(184,160,130,0.25);
}
.am-faq__item {
  border-bottom: 1px solid rgba(184,160,130,0.25);
}
.am-faq__item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem 0.2rem;
  font-family: 'Libre Baskerville', serif;
  font-size: 1.15rem;
  color: var(--am-graphite);
}
.am-faq__item > summary::-webkit-details-marker { display: none; }
.am-faq__item > summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--am-bronze);
  transition: transform .4s var(--ease-out);
}
.am-faq__item[open] > summary::after { transform: rotate(45deg); }
.am-faq__item .am-faq__answer {
  padding: 0 0.2rem 1.8rem;
  max-width: 62ch;
  color: var(--am-taupe);
  line-height: 1.7;
}

/* -------------------------------------------------------------
   13. Breadcrumbs — jerarquía SILO visible (Inicio › Servicios › …)
   ------------------------------------------------------------- */
.am-breadcrumbs {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: var(--am-taupe);
}
.am-breadcrumbs a { color: var(--am-taupe); }
.am-breadcrumbs a:hover { color: var(--am-bronze); }
.am-breadcrumbs li:last-child { color: var(--am-graphite); }

/* -------------------------------------------------------------
   14. Selector de idioma (header)
   ------------------------------------------------------------- */
.am-lang-switch a {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--am-taupe);
}
.am-lang-switch a[aria-current="true"] {
  color: var(--am-graphite);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--am-bronze);
}