/* ==========================================================================
   ILRITORNO — visual-rebuild.css
   Hero polaroid stack · Historia dark · Alternating tones · Café negro
   ========================================================================== */

/* ============================================================
   Quitar texturas/ramas decorativas del hero (feedback David)
   ============================================================ */
.hero__decor,
.hero--polaroid .hero__decor {
  display: none !important;
}

/* ============================================================
   HERO POLAROID STACK
   ============================================================ */
.hero--polaroid .hero__cinema-media {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .hero--polaroid .hero__cinema-media {
    min-height: 380px;
    margin-top: 1rem;
  }
}

.hero__polaroid-stack {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1.15;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .hero__polaroid-stack {
    max-width: 280px;
  }
}

.hero__polaroid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 14px 14px 50px;
  border-radius: 4px;
  box-shadow:
    0 1px 2px rgba(46, 47, 36, 0.08),
    0 8px 24px rgba(46, 47, 36, 0.18),
    0 16px 48px rgba(46, 47, 36, 0.10);
  display: flex;
  flex-direction: column;
  transform-origin: center;
  animation: polaroidStack 16s infinite ease-in-out;
  will-change: transform, opacity;
}

@media (max-width: 600px) {
  .hero__polaroid {
    padding: 10px 10px 40px;
  }
}

.hero__polaroid--0 { animation-delay: 0s;     transform: rotate(-4deg) translate(-8px, -4px); z-index: 4; }
.hero__polaroid--1 { animation-delay: -4s;    transform: rotate(3deg) translate(6px, 4px);    z-index: 3; }
.hero__polaroid--2 { animation-delay: -8s;    transform: rotate(-2deg) translate(-4px, 8px);  z-index: 2; }
.hero__polaroid--3 { animation-delay: -12s;   transform: rotate(5deg) translate(8px, -2px);   z-index: 1; }

@keyframes polaroidStack {
  0%, 100% {
    transform: rotate(-4deg) translate(-8px, -4px) scale(1);
    z-index: 4;
    opacity: 1;
  }
  20% {
    transform: rotate(-12deg) translate(-40px, 20px) scale(0.95);
    opacity: 0.6;
  }
  25% {
    transform: rotate(3deg) translate(6px, 4px) scale(1);
    opacity: 1;
    z-index: 1;
  }
  /* 4 tarjetas en loop: cada una sale al frente 25% del tiempo */
  50% {
    transform: rotate(-2deg) translate(-4px, 8px) scale(1);
    z-index: 2;
  }
  75% {
    transform: rotate(5deg) translate(8px, -2px) scale(1);
    z-index: 3;
  }
}

/* Animación específica por tarjeta usando delay para crear efecto "stack que rota" */
.hero__polaroid-img {
  flex: 1;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 2px;
  background-color: #F0EADB;
  box-shadow: inset 0 0 0 1px rgba(46, 47, 36, 0.05);
}

.hero__polaroid-caption {
  margin-top: 14px;
  text-align: center;
  font-family: 'Caveat', 'Brush Script MT', cursive;
  font-size: 1.4rem;
  color: var(--ir-ink, #2E2F24);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.5px;
}

@media (max-width: 600px) {
  .hero__polaroid-caption {
    font-size: 1.15rem;
    margin-top: 10px;
  }
}

/* Polaroid pin decorativo arriba */
.hero__polaroid::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: rgba(184, 69, 79, 0.85);
  border-radius: 50%;
  box-shadow:
    0 1px 2px rgba(46, 47, 36, 0.3),
    inset -2px -2px 4px rgba(0, 0, 0, 0.2),
    inset 2px 2px 3px rgba(255, 255, 255, 0.4);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero__polaroid {
    animation: none;
  }
}

/* ============================================================
   HISTORIA — fondo café negro/verde oscuro con logo de fondo
   ============================================================ */
.historia--dark {
  position: relative;
  background: linear-gradient(135deg, #2A2D24 0%, #1F2018 50%, #2E2F24 100%) !important;
  color: #F0EADB !important;
  padding: 6rem 0 !important;
  overflow: hidden;
  isolation: isolate;
}

.historia--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(193, 198, 169, 0.06), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(195, 168, 134, 0.05), transparent 50%);
  z-index: 0;
}

.historia--dark .container {
  position: relative;
  z-index: 2;
}

.historia__bg-logo {
  position: absolute;
  top: 50%;
  right: -10%;
  transform: translateY(-50%);
  width: 580px;
  height: 580px;
  z-index: 1;
  opacity: 0.06;
  pointer-events: none;
  animation: bgLogoSpin 80s infinite linear;
}

.historia__bg-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(2) saturate(0);
}

@keyframes bgLogoSpin {
  to { transform: translateY(-50%) rotate(360deg); }
}

.historia--dark .historia__inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 900px) {
  .historia--dark .historia__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .historia__bg-logo {
    width: 380px;
    height: 380px;
    right: -25%;
    opacity: 0.04;
  }
}

.historia--dark .historia__media img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(240, 234, 219, 0.08);
}

.historia--dark .eyebrow,
.historia--dark .eyebrow--light {
  color: #C1C6A9 !important;
  letter-spacing: 2px;
}

.historia--dark .historia__title {
  font-family: var(--ir-font-display, serif) !important;
  font-size: clamp(2rem, 4vw, 2.85rem) !important;
  color: #F0EADB !important;
  line-height: 1.15 !important;
  margin: 0.75rem 0 1.5rem !important;
  font-weight: 400 !important;
}

.historia--dark .historia__title em {
  font-style: italic;
  color: #D3C8B1;
  font-family: 'Cormorant Garamond', serif;
}

.historia--dark p {
  color: rgba(240, 234, 219, 0.85) !important;
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.btn-outline--light {
  border-color: #F0EADB !important;
  color: #F0EADB !important;
  background: transparent !important;
}

.btn-outline--light:hover {
  background: #F0EADB !important;
  color: #2E2F24 !important;
}

/* ============================================================
   PALETA Olive Garden (manual de marca cliente · 2026-05-06)
   Restituida a verdes después de feedback "no veo nada verde"
   ============================================================ */
:root {
  --ir-cream:    #F0EADB;  /* primario · fondo principal beige cálido */
  --ir-sage:     #C1C6A9;  /* primario · verde sage claro · acentos */
  --ir-ink:      #2E2F24;  /* primario · verde casi negro · textos principales */
  --ir-line:     #D3C8B1;  /* secundario · beige medio · bordes/líneas */
  --ir-sage-d:   #8B8E78;  /* secundario · verde gris · textos secundarios */
  --ir-earth:    #686150;  /* secundario · tierra oscura · detalles */

  /* aliases legacy para no romper otras CSS que usan estos nombres */
  --ir-coffee:   #2E2F24;  /* alias = ink (verde oscuro) */
  --ir-coffee-d: #1A1C14;  /* verde muy oscuro */
}

/* Reset selectivo: mantener verde sage para acentos, café para textos/headers */
body {
  color: var(--ir-ink) !important;
}

/* ============================================================
   ALTERNATING TONES — secciones nosotros y home
   Pattern: cream → sage-soft → cream-warm → ink-dark
   ============================================================ */
.section--alt-1 { background: var(--ir-cream, #F0EADB) !important; }
.section--alt-2 { background: rgba(193, 198, 169, 0.18) !important; }
.section--alt-3 { background: #EFE6D2 !important; }
.section--alt-4 {
  background: linear-gradient(135deg, #2A2D24 0%, #2E2F24 100%) !important;
  color: #F0EADB !important;
}

.section--alt-4 h2,
.section--alt-4 .eyebrow,
.section--alt-4 p {
  color: #F0EADB !important;
}

.section--alt-4 .eyebrow {
  color: #C1C6A9 !important;
}

/* Sobre nosotros — alternar automáticamente */
body.page-template-page-sobre-nosotros .section:nth-of-type(odd):not(.historia--dark) {
  background: var(--ir-cream, #F0EADB);
}

body.page-template-page-sobre-nosotros .section:nth-of-type(even):not(.historia--dark) {
  background: rgba(193, 198, 169, 0.20);
}

/* ============================================================
   QUITAR EMOJIS de cualquier output que aún los tenga
   (CSS-side: ocultar caracteres emoji con display)
   ============================================================ */
.no-emoji::before,
.no-emoji::after {
  content: none !important;
}

/* WP emoji image insertion */
img.emoji,
img.wp-smiley {
  display: none !important;
}

/* ============================================================
   Eyebrow modifier para contextos oscuros
   ============================================================ */
.eyebrow--light {
  color: #C1C6A9 !important;
}