/* ===================================================================
   FOSSIL NATURA — ACTUALIDAD
   Estilos para actualidad.php (listado) y noticia.php (detalle).
   Capa sobre main.css. Sin overrides ni !important.
   =================================================================== */

/* ══════════════════════════════════════════════════════════════════
   NOTICIA — HERO (con y sin imagen de fondo)
══════════════════════════════════════════════════════════════════ */
.noticia-hero {
  background: var(--v3-bg-alt);
  padding: 80px 0 64px;
  border-bottom: 1px solid var(--v3-line);
  text-align: center;
}
.noticia-hero.has-img {
  position: relative;
  padding: clamp(120px, 18vw, 200px) 0 clamp(80px, 10vw, 120px);
  background-size: cover;
  background-position: center;
  border-bottom: none;
}

/* Overlay oscuro (solo con imagen) */
.noticia-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(5,5,5,.55) 0%,
    rgba(5,5,5,.72) 60%,
    rgba(5,5,5,.88) 100%
  );
  z-index: 0;
}

/* Contenido centrado */
.noticia-hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* Eyebrow: etiqueta · fecha */
.noticia-hero-eyebrow {
  font-family: var(--v3-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--v3-olive);
  display: block;
  margin-bottom: 20px;
}
.noticia-hero.has-img .noticia-hero-eyebrow {
  color: rgba(255,255,255,.55);
}

/* Título */
.noticia-hero h1 {
  font-family: var(--v3-serif);
  font-size: clamp(36px, 5.5vw, 80px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--v3-ink);
  margin: 0 auto 36px;
  max-width: 780px;
}
.noticia-hero.has-img h1 { color: #fff; }

/* Breadcrumb en hero con imagen */
.noticia-hero.has-img .v3-breadcrumb { justify-content: center; }
.noticia-hero.has-img .v3-breadcrumb,
.noticia-hero.has-img .v3-breadcrumb a { color: rgba(255,255,255,.45); }
.noticia-hero.has-img .v3-breadcrumb a:hover { color: rgba(255,255,255,.9); }
.noticia-hero.has-img .v3-breadcrumb span { color: rgba(255,255,255,.25); }

/* ══════════════════════════════════════════════════════════════════
   NOTICIA — CUERPO DEL ARTÍCULO
══════════════════════════════════════════════════════════════════ */
.noticia-section {
  padding: 72px 0 96px;
  background: var(--v3-bg);
}
.container-narrow {
  max-width: 740px;
  margin: 0 auto;
}

/* Lead en cursiva */
.noticia-resumen {
  font-family: var(--v3-serif);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 300;
  font-style: italic;
  color: var(--v3-ink-soft);
  line-height: 1.5;
  padding-bottom: 40px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--v3-line);
}

/* Contenido editorial */
.noticia-contenido {
  font-family: var(--v3-sans);
  font-size: 16px;
  line-height: 1.85;
  color: var(--v3-ink-soft);
}
.prose h2 {
  font-family: var(--v3-serif);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.1;
  color: var(--v3-ink);
  margin: 56px 0 20px;
}
.prose h3 {
  font-family: var(--v3-serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--v3-ink);
  margin: 40px 0 16px;
}
.prose p { margin-bottom: 22px; color: var(--v3-ink-soft); }
.prose ul,
.prose ol { padding-left: 1.6em; margin: 0 0 22px; }
.prose ul { list-style: disc outside; }
.prose ol { list-style: decimal outside; }
.prose ul ul { list-style: circle outside; margin: 8px 0; }
.prose ol ol { list-style: lower-alpha outside; margin: 8px 0; }
.prose li {
  margin-bottom: 8px;
  color: var(--v3-ink-soft);
  line-height: 1.7;
  display: list-item;       /* fuerza viñeta aunque haya un reset previo */
}
.prose li::marker { color: var(--v3-olive); }
.prose strong { font-weight: 600; color: var(--v3-ink); }
.prose em { font-style: italic; }
.prose a {
  color: var(--v3-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--v3-line);
  transition: text-decoration-color .2s;
}
.prose a:hover { text-decoration-color: var(--v3-ink); }
.prose img {
  max-width: 100%;
  display: block;
  margin: 40px 0;
  border: 1px solid var(--v3-line);
  filter: grayscale(8%);
}
.prose blockquote {
  border-left: 2px solid var(--v3-ink);
  margin: 40px 0;
  padding: 4px 0 4px 28px;
  font-family: var(--v3-serif);
  font-size: 20px;
  font-style: italic;
  color: var(--v3-ink-soft);
  line-height: 1.5;
}

/* Pie del artículo */
.noticia-footer {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--v3-line);
}

/* ══════════════════════════════════════════════════════════════════
   BLOQUES DE MAQUETACIÓN — usados dentro de .noticia-contenido
   Diseñados para vivir dentro de .container-narrow (max 740px).
   La modificadora .fn-wide rompe el ancho hasta ~1100px (centrado).
══════════════════════════════════════════════════════════════════ */

/* Modificador OPCIONAL de ancho extendido — sólo se aplica si se añade
   la clase `fn-wide` a mano (por defecto los bloques se ajustan al ancho
   de la columna del texto, 740px). Pensado para galerías destacadas o
   imágenes-héroe. El centrado usa la técnica de "negative margin matching"
   que es fiable mientras .container-narrow esté centrado en su padre. */
.noticia-contenido .fn-wide {
  /* "Cuántos píxeles más, a cada lado, queremos crecer respecto a la
     columna de 740px, sin sobrepasar 48px de margen al viewport." */
  --fn-extra: max(0px, min(180px, calc((100vw - 740px) / 2 - 48px)));
  margin-left:  calc(-1 * var(--fn-extra));
  margin-right: calc(-1 * var(--fn-extra));
  width: auto;
}

/* Texto en dos columnas */
.noticia-contenido .fn-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin: 32px 0 36px;
}
.noticia-contenido .fn-cols > * { min-width: 0; }
.noticia-contenido .fn-cols p:last-child { margin-bottom: 0; }

/* Galería de imágenes — base */
.noticia-contenido .fn-gallery {
  display: grid;
  gap: 12px;
  margin: 36px 0;
}
.noticia-contenido .fn-gallery-2 { grid-template-columns: repeat(2, 1fr); }
.noticia-contenido .fn-gallery-3 { grid-template-columns: repeat(3, 1fr); }
.noticia-contenido .fn-gallery figure { margin: 0; }
.noticia-contenido .fn-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  margin: 0;
  border: 1px solid var(--v3-line);
  filter: grayscale(8%);
}
/* La galería de 3 con .fn-wide queda en formato más panorámico */
.noticia-contenido .fn-gallery.fn-wide img { aspect-ratio: 3 / 4; }
.noticia-contenido .fn-gallery figcaption {
  font-family: var(--v3-mono);
  font-size: 11px;
  color: var(--v3-sand);
  margin-top: 8px;
  letter-spacing: .04em;
}

/* Imagen a ancho extendido */
.noticia-contenido .fn-img-full {
  margin: 48px 0;
}
.noticia-contenido .fn-img-full img {
  width: 100%;
  display: block;
  margin: 0;
  border: 1px solid var(--v3-line);
  filter: grayscale(8%);
}
.noticia-contenido .fn-img-full figcaption {
  font-family: var(--v3-mono);
  font-size: 11px;
  color: var(--v3-sand);
  margin-top: 12px;
  letter-spacing: .04em;
  text-align: center;
}

/* Imagen + texto */
.noticia-contenido .fn-imgtxt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
  margin: 40px 0;
}
.noticia-contenido .fn-imgtxt figure { margin: 0; }
.noticia-contenido .fn-imgtxt img {
  width: 100%;
  display: block;
  margin: 0;
  border: 1px solid var(--v3-line);
  filter: grayscale(8%);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.noticia-contenido .fn-imgtxt p:last-child { margin-bottom: 0; }
/* Inversión opcional: imagen a la derecha si se añade .fn-reverse */
.noticia-contenido .fn-imgtxt.fn-reverse > figure { order: 2; }

/* Cita destacada (pull quote) */
.noticia-contenido .fn-pullquote {
  border-left: 3px solid var(--v3-ink);
  margin: 48px 0;
  padding: 8px 0 8px 32px;
  font-family: var(--v3-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  color: var(--v3-ink);
  letter-spacing: -.01em;
}

/* Vídeo embebido (YouTube) — siempre 16:9, responsivo */
.noticia-contenido .fn-video {
  position: relative;
  margin: 48px 0;
  background: #000;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--v3-line);
}
.noticia-contenido .fn-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Huecos sin contenido — sólo se ocultan si no tienen ni imagen ni iframe.
   Usa :has() (soportado en todos los navegadores modernos desde 2023). */
.noticia-contenido .fn-slot:not(:has(img)):not(:has(iframe)) { display: none; }

/* Responsive: una sola columna en móvil */
@media (max-width: 720px) {
  .noticia-contenido .fn-cols,
  .noticia-contenido .fn-imgtxt,
  .noticia-contenido .fn-gallery-2 { grid-template-columns: 1fr; gap: 16px; }
  .noticia-contenido .fn-gallery-3 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .noticia-contenido .fn-imgtxt.fn-reverse > figure { order: 0; }
  .noticia-contenido .fn-wide {
    margin-left: 0;
    margin-right: 0;
    width: auto;
  }
  .noticia-contenido .fn-pullquote { padding-left: 20px; }
}

/* ══════════════════════════════════════════════════════════════════
   NOTICIAS RELACIONADAS
══════════════════════════════════════════════════════════════════ */
.noticia-relacionadas {
  background: var(--v3-bg-alt);
  border-top: 1px solid var(--v3-line);
  padding: 64px 0;
}
.noticia-rel-title {
  font-family: var(--v3-serif);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--v3-ink);
  margin: 8px 0 40px;
}
.noticia-rel-title .it { font-style: italic; }

/* Grid de relacionadas */
.noticia-rel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--v3-line);
  background: var(--v3-line);
  gap: 1px;
}
.noticia-rel-grid a {
  background: var(--v3-bg);
  display: block;
  text-decoration: none;
  color: inherit;
  transition: background .25s;
}
.noticia-rel-grid a:hover { background: var(--v3-bg-alt); }
.rel-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.rel-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(12%);
  display: block;
  transition: transform .5s ease;
}
.noticia-rel-grid a:hover .rel-img img { transform: scale(1.03); }
.rel-body {
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid var(--v3-line);
}
.rel-date {
  font-family: var(--v3-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--v3-sand);
  display: block;
  margin-bottom: 6px;
}
.rel-title {
  font-family: var(--v3-serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--v3-ink);
  letter-spacing: -.01em;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   ACTUALIDAD — LISTADO DE NOTICIAS
══════════════════════════════════════════════════════════════════ */
.news-main {
  padding: 80px 0;
  background: var(--v3-bg);
}

/* Noticia destacada */
.post-featured {
  margin-bottom: 64px;
  border-bottom: 1px solid var(--v3-line);
  padding-bottom: 64px;
}
.post-featured-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.post-featured-img {
  overflow: hidden;
  background: var(--v3-bg-alt);
}
.post-featured-img img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: grayscale(8%);
  transition: transform .6s ease;
}
.post-featured-inner:hover .post-featured-img img { transform: scale(1.03); }
.post-featured-content { padding: 8px 0; }

.post-tag {
  font-family: var(--v3-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--v3-olive);
  display: inline-block;
  margin-bottom: 10px;
  border: 1px solid var(--v3-line);
  padding: 4px 12px;
  border-radius: 100px;
}
.post-date {
  font-family: var(--v3-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v3-sand);
  display: block;
  margin-bottom: 18px;
}
.post-featured-content h2 {
  font-family: var(--v3-serif);
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 300;
  line-height: 1.07;
  letter-spacing: -.02em;
  color: var(--v3-ink);
  margin-bottom: 20px;
}
.post-featured-content p {
  font-family: var(--v3-sans);
  font-size: 14px;
  color: var(--v3-olive);
  line-height: 1.8;
  margin-bottom: 24px;
}
.post-read-more {
  font-family: var(--v3-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v3-ink);
  border-bottom: 1px solid var(--v3-line);
  padding-bottom: 2px;
  transition: border-color .2s;
  display: inline-block;
}
.post-featured-inner:hover .post-read-more,
.post-card:hover .post-read-more { border-color: var(--v3-ink); }

/* Grid de tarjetas */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 32px;
}
.post-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .3s ease;
}
.post-card:hover { transform: translateY(-3px); }
.post-img {
  position: relative;
  overflow: hidden;
  background: var(--v3-bg-alt);
  aspect-ratio: 4 / 3;
  margin-bottom: 20px;
}
.post-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(10%);
  transition: transform .5s ease;
}
.post-card:hover .post-img img { transform: scale(1.04); }
.post-tag-img {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--v3-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  background: rgba(10,10,10,.4);
  padding: 4px 10px;
  border-radius: 100px;
  backdrop-filter: blur(4px);
}
.post-body { padding: 0 2px; }
.post-body .post-date { margin-bottom: 10px; }
.post-body h3 {
  font-family: var(--v3-serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--v3-ink);
  margin-bottom: 12px;
}
.post-body p {
  font-family: var(--v3-sans);
  font-size: 13px;
  color: var(--v3-olive);
  line-height: 1.75;
  margin-bottom: 14px;
}
.post-body .post-read-more {
  font-size: 10px;
  padding-bottom: 1px;
}

/* Paginación — estilos base en main.css (.v3-cat-pagination) */

/* ══════════════════════════════════════════════════════════════════
   NEWSLETTER — fondo oscuro
══════════════════════════════════════════════════════════════════ */
.newsletter-section {
  background: var(--v3-ink);
  padding: 80px 0;
}
.newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.newsletter-text .v3-eyebrow { color: rgba(255,255,255,.4); }
.newsletter-text h2 {
  font-family: var(--v3-serif);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 300;
  color: #fff;
  letter-spacing: -.02em;
  margin: 12px 0 0;
}
.newsletter-text h2 .it { font-style: italic; }
.newsletter-text p {
  font-family: var(--v3-sans);
  font-size: 14px;
  color: rgba(255,255,255,.45);
  margin-top: 12px;
}
.newsletter-form .newsletter-fields { display: flex; gap: 0; }
.newsletter-form input[type="email"] {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.15);
  border-right: none;
  border-radius: 0;
  font-family: var(--v3-sans);
  font-size: 14px;
  color: #fff;
  background: rgba(255,255,255,.06);
  outline: none;
}
.newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,.3); }
.newsletter-form .v3-btn {
  background: #fff;
  color: var(--v3-ink);
  border-color: #fff;
  border-radius: 0;
  white-space: nowrap;
}
.newsletter-form .v3-btn:hover { background: rgba(255,255,255,.88); }
.newsletter-legal {
  font-family: var(--v3-sans);
  font-size: 11px;
  color: rgba(255,255,255,.3);
  margin-top: 12px;
  line-height: 1.6;
}
.newsletter-legal a { color: rgba(255,255,255,.5); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .post-featured-inner { grid-template-columns: 1fr; gap: 32px; }
  .posts-grid { grid-template-columns: repeat(2, 1fr); }
  .noticia-rel-grid { grid-template-columns: repeat(2, 1fr); }
  .newsletter-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .posts-grid { grid-template-columns: 1fr; }
  .noticia-rel-grid { grid-template-columns: 1fr; }
}