/* =============================================================================
   El Palmar — tide-seo-blocks.css
   [tide_spot_info] + [tide_faq]
   ============================================================================= */

.ep-spot-info,
.ep-faq-block {
  --ep-heading:  #0f1f2e;
  --ep-text:     #374151;
  --ep-muted:    #6b7280;
  --ep-border:   #e5edf2;
  --ep-bg-soft:  #f6fafc;
  --ep-accent:   #0d6e8a;
  --ep-radius:   10px;
  font-family:   inherit;   /* hereda la fuente del tema */
  color:         var(--ep-text);
  line-height:   1.7;
}

/* ── Headings — heredan el estilo del tema WP ──────────────────────────────── */

.ep-spot-info h2 {
  font-size:      1.25rem;
  font-weight:    700;
  color:          var(--ep-heading);
  margin:         2.2rem 0 1rem;
  padding-bottom: .5rem;
  border-bottom:  2px solid var(--ep-border);
  letter-spacing: -.01em;
}

.ep-spot-info h2:first-child { margin-top: 0; }

.ep-spot-info p {
  font-size:   .9375rem;   /* 15px */
  margin:      0 0 .9rem;
}

.ep-spot-info strong {
  color:       var(--ep-heading);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════════
   Intro: prosa + datos clave en columnas
   ════════════════════════════════════════════════════════════════════════════ */

.ep-spot-intro-grid {
  display:               grid;
  grid-template-columns: 1fr 300px;
  gap:                   32px;
  align-items:           start;
  margin-bottom:         .5rem;
}

/* Columna de texto */
.ep-spot-intro-text h2 {
  margin-top: 0;
}

/* Columna de datos clave */
.ep-spot-facts-aside {
  position:      sticky;
  top:           20px;
}

.ep-spot-facts-list {
  margin:        0;
  padding:       0;
  background:    var(--ep-bg-soft);
  border:        1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  overflow:      hidden;
}

.ep-spot-fact-item {
  display:      grid;
  grid-template-columns: 110px 1fr;
  gap:          8px;
  padding:      10px 14px;
  border-bottom: 1px solid var(--ep-border);
  font-size:    .8125rem;   /* 13px */
  align-items:  baseline;
}

.ep-spot-fact-item:last-child { border-bottom: none; }

.ep-spot-fact-item dt {
  font-weight:    700;
  color:          var(--ep-heading);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size:      .6875rem; /* 11px */
}

.ep-spot-fact-item dd {
  margin:     0;
  color:      var(--ep-text);
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════════════════
   Épocas del año — 3 columnas
   ════════════════════════════════════════════════════════════════════════════ */

.ep-spot-seasons {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   12px;
  margin-bottom:         .5rem;
}

.ep-spot-season {
  border-radius:  var(--ep-radius);
  padding:        20px 18px;
  border-left:    4px solid transparent;
  background:     var(--ep-bg-soft);
  border-top:     1px solid var(--ep-border);
  border-right:   1px solid var(--ep-border);
  border-bottom:  1px solid var(--ep-border);
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.ep-spot-season--best   { border-left-color: #059669; background: #f0fdf4; border-top-color: #bbf7d0; border-right-color: #bbf7d0; border-bottom-color: #bbf7d0; }
.ep-spot-season--winter { border-left-color: #2563eb; background: #eff6ff; border-top-color: #bfdbfe; border-right-color: #bfdbfe; border-bottom-color: #bfdbfe; }
.ep-spot-season--summer { border-left-color: #d97706; background: #fffbeb; border-top-color: #fde68a; border-right-color: #fde68a; border-bottom-color: #fde68a; }

.ep-spot-season-pill {
  display:        inline-block;
  font-size:      .6875rem;
  font-weight:    800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding:        2px 10px;
  border-radius:  999px;
  width:          fit-content;
  background:     rgba(0,0,0,.07);
  color:          var(--ep-heading);
}

.ep-spot-season-name {
  font-size:   .9375rem;
  font-weight: 700;
  color:       var(--ep-heading);
  line-height: 1.3;
}

.ep-spot-season p {
  font-size:   .875rem;
  margin:      0;
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════════════════════
   Guía de viento — 3 columnas
   ════════════════════════════════════════════════════════════════════════════ */

.ep-spot-wind-intro {
  color:       var(--ep-muted);
  font-size:   .875rem;
  margin-top:  -.4rem;
}

.ep-spot-winds {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   12px;
}

.ep-spot-wind {
  border-radius:  var(--ep-radius);
  padding:        20px 18px;
  display:        flex;
  flex-direction: column;
  gap:            4px;
  border:         1px solid var(--ep-border);
  background:     #fff;
}

.ep-spot-wind p {
  font-size:   .875rem;
  margin:      8px 0 0;
  line-height: 1.6;
  color:       var(--ep-text);
}

/* Tag de tipo de viento */
.ep-spot-wind-tag {
  display:        inline-block;
  font-size:      .6875rem;
  font-weight:    800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding:        2px 10px;
  border-radius:  999px;
  width:          fit-content;
  margin-bottom:  4px;
}

.ep-spot-wind--offshore .ep-spot-wind-tag { background: #dcfce7; color: #166534; }
.ep-spot-wind--cross    .ep-spot-wind-tag { background: #fef9c3; color: #854d0e; }
.ep-spot-wind--onshore  .ep-spot-wind-tag { background: #fee2e2; color: #991b1b; }

.ep-spot-wind-name {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--ep-heading);
}

.ep-spot-wind-dir {
  font-size:   .8125rem;
  color:       var(--ep-muted);
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════════════════
   FAQ accordion
   ════════════════════════════════════════════════════════════════════════════ */

.ep-faq-block {
  margin-top: 2.5rem;
}

.ep-faq-block > h2 {
  font-size:      1.375rem;
  font-weight:    700;
  color:          var(--ep-heading);
  margin:         0 0 1.1rem;
  padding-bottom: .5rem;
  border-bottom:  2px solid var(--ep-border);
}

.ep-faq-item {
  border:        1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  margin-bottom: 8px;
  background:    #fff;
  overflow:      hidden;
  transition:    box-shadow .18s;
}

.ep-faq-item[open] {
  box-shadow: 0 2px 14px rgba(13,110,138,.09);
}

.ep-faq-question {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             12px;
  padding:         14px 18px;
  font-size:       .9rem;
  font-weight:     600;
  color:           var(--ep-heading);
  cursor:          pointer;
  list-style:      none;
  user-select:     none;
}

.ep-faq-question::-webkit-details-marker { display: none; }

.ep-faq-question::after {
  content:     '+';
  font-size:   22px;
  font-weight: 300;
  color:       var(--ep-accent);
  flex-shrink: 0;
}

.ep-faq-item[open] .ep-faq-question        { color: var(--ep-accent); }
.ep-faq-item[open] .ep-faq-question::after { content: '×'; }

.ep-faq-answer {
  padding:    0 18px 16px;
  border-top: 1px solid var(--ep-border);
  background: var(--ep-bg-soft);
}

.ep-faq-answer p {
  font-size:   .875rem;
  margin:      14px 0 0;
  line-height: 1.7;
}

.ep-faq-answer strong { color: var(--ep-heading); font-weight: 600; }

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .ep-spot-intro-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ep-spot-facts-aside { position: static; }

  .ep-spot-seasons,
  .ep-spot-winds {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .ep-spot-info h2 { font-size: 1.1rem; }
  .ep-faq-question  { font-size: .875rem; padding: 13px 14px; }
  .ep-faq-answer    { padding: 0 14px 14px; }
}