/* ============================================================
   STRASBOURG · web5 / Propuesta D
   Layout editorial: barra lateral fija + panels expandibles.
   ============================================================ */

/* ---------- Oswald (display) ---------- */
@font-face { font-family:"Oswald"; src:url("../fonts/Oswald-Light.ttf") format("truetype");   font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Oswald"; src:url("../fonts/Oswald-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Oswald"; src:url("../fonts/Oswald-Bold.ttf") format("truetype");    font-weight:700; font-style:normal; font-display:swap; }

/* ---------- Oktah Round (texto) ---------- */
/* La versión demo de Oktah Round no incluye los glifos @ + * (pinta una cajita
   "DEMO"). Excluimos esos 3 códigos del rango de la fuente (U+2A *, U+2B +,
   U+40 @) para que los sirva una fuente del sistema definida más abajo. */
@font-face { font-family:"Oktah Round"; src:url("../fonts/OktahRound-Light.otf") format("opentype");   font-weight:300; font-style:normal; font-display:swap; unicode-range:U+0-29, U+2C-3F, U+41-10FFFF; }
@font-face { font-family:"Oktah Round"; src:url("../fonts/OktahRound-Book.otf") format("opentype");     font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0-29, U+2C-3F, U+41-10FFFF; }
@font-face { font-family:"Oktah Round"; src:url("../fonts/OktahRound-Regular.otf") format("opentype");  font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0-29, U+2C-3F, U+41-10FFFF; }
@font-face { font-family:"Oktah Round"; src:url("../fonts/OktahRound-Medium.otf") format("opentype");   font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0-29, U+2C-3F, U+41-10FFFF; }
/* Solo @ + * : fuente del sistema (Oktah demo no los trae). */
@font-face { font-family:"Oktah Round"; src:local("Arial"),local("Helvetica Neue"),local("Segoe UI"); font-weight:300 600; font-style:normal; unicode-range:U+002A, U+002B, U+0040; }

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.font-display { font-family:"Oswald","Arial Narrow",sans-serif; }

/* Interlineado seguro para títulos en mayúsculas: evita que los
   acentos (Ó, É, Í…) choquen con la línea superior. */
h1.font-display, h2.font-display, h3.font-display { line-height: 1.08; }

/* Texto con contorno (outline) para titulares editoriales */
.text-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px #0C0C0C;
}

/* ============================================================
   PANELS EXPANDIBLES (acordeón horizontal en escritorio)
   ============================================================ */
.panels { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1024px) {
  .panels { flex-direction: row; height: 560px; gap: 16px; }
  .panel {
    position: relative;
    flex: 1 1 0%;
    transition: flex-grow .6s cubic-bezier(.22,.7,.2,1);
    overflow: hidden;
  }
  .panel:hover, .panel.active { flex-grow: 4.2; }
  /* contenido revelado */
  .panel .panel-open { opacity: 0; transform: translateY(14px); transition: opacity .5s ease .1s, transform .5s ease .1s; }
  .panel:hover .panel-open, .panel.active .panel-open { opacity: 1; transform: none; }
  .panel .panel-collapsed { transition: opacity .3s ease; }
  .panel:hover .panel-collapsed, .panel.active .panel-collapsed { opacity: 0; }
}
/* en móvil los paneles se muestran abiertos */
@media (max-width: 1023px) {
  .panel { min-height: 260px; }
  .panel .panel-collapsed { display: none; }
}

/* ---------- Reveal ---------- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity:1; transform:none; }

/* ---------- Marquee vertical del sidebar ---------- */
@keyframes floaty { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.floaty { animation: floaty 8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .panel { transition:none; }
  .floaty { animation:none; }
}

/* ============================================================
   ACORDEÓN DE CATEGORÍAS (página de Telas)
   ============================================================ */
.acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s cubic-bezier(.22,.7,.2,1);
}
.acc-item.open .acc-body { grid-template-rows: 1fr; }
.acc-body > .acc-inner { overflow: hidden; }
.acc-chevron { transition: transform .45s cubic-bezier(.22,.7,.2,1); }
.acc-item.open .acc-chevron { transform: rotate(180deg); }
.acc-photo { transition: transform .7s cubic-bezier(.22,.7,.2,1); }
.acc-item.open .acc-photo,
.acc-head:hover .acc-photo { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .acc-body, .acc-chevron, .acc-photo { transition:none; }
}

/* ============================================================
   ACORDEÓN DE SERVICIOS (vertical, estilo tarjetas)
   ============================================================ */
.svc-item { background:#fff; color:#0C0C0C; transition: background-color .5s ease, color .5s ease; }
.svc-item.open { background:#681B22; color:#F8F4F1; }
.svc-num  { color: rgba(12,12,12,.35); }
.svc-item.open .svc-num  { color: rgba(248,244,241,.55); }
.svc-desc { color: rgba(74,70,66,.85); }
.svc-item.open .svc-desc { color: rgba(248,244,241,.82); }

.svc-extra { display:grid; grid-template-rows:0fr; transition: grid-template-rows .55s cubic-bezier(.22,.7,.2,1); }
.svc-item.open .svc-extra { grid-template-rows:1fr; }
.svc-extra > .svc-extra-inner { overflow:hidden; }

/* botón +/- */
.svc-vbar { transition: opacity .3s ease, transform .35s ease; }
.svc-item.open .svc-vbar { opacity:0; transform: rotate(90deg); }

/* placeholder de foto (reemplazar por <img> cuando haya fotos reales) */
.svc-photo {
  background-color:#DED4C6;
  background-image:
    repeating-linear-gradient(45deg, rgba(104,27,34,.06) 0 9px, transparent 9px 18px),
    repeating-linear-gradient(-45deg, rgba(12,12,12,.05) 0 9px, transparent 9px 18px);
}
.svc-photo img { width:100%; height:100%; object-fit:cover; display:block; }

@media (prefers-reduced-motion: reduce) {
  .svc-item, .svc-extra, .svc-vbar { transition:none; }
}

/* ---------- Slider de producción (hero) ----------
   Alterna 2 imágenes con fundido, sin esquinas redondeadas y con
   los bordes difuminados hacia el fondo (máscara en los 4 lados). */
.prod-slider {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-composite: intersect;
}
.prod-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}
.prod-slide.is-active { opacity: 1; }
.prod-dot {
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background: rgba(12, 12, 12, 0.2);
  cursor: pointer;
  transition: background .3s ease, width .3s ease;
}
.prod-dot:hover { background: rgba(12, 12, 12, 0.4); }
.prod-dot.is-active { width: 26px; background: #681B22; }