/* =========================================================================
   WEB PLACAS SOLARES — styles.css
   Diseño limpio, profesional, aire "verde/energía" sobrio. Mobile-first.
   Sin frameworks. Paleta y tipografía distintas de la web de seguros.
   Autor del sitio: Jaime Martínez
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Variables de tema
   ------------------------------------------------------------------------- */
:root {
  /* Paleta: verde energía sobrio + acento solar cálido */
  --verde-900: #0f3d2e;   /* verde bosque profundo (texto sobre claro) */
  --verde-700: #15694d;   /* verde principal */
  --verde-500: #1f9d6b;   /* verde vivo (acentos, enlaces) */
  --verde-100: #e6f4ee;   /* verde muy claro (fondos suaves) */
  --sol-500:   #f6a821;   /* amarillo/ámbar solar (CTA, resaltes) */
  --sol-600:   #e0900c;

  --tinta:     #16211d;   /* texto principal casi negro verdoso */
  --gris-600:  #52605b;   /* texto secundario */
  --gris-300:  #d5ddd9;   /* bordes */
  --gris-100:  #f4f7f5;   /* fondo de sección */
  --blanco:    #ffffff;

  --sombra:     0 1px 3px rgba(16, 33, 29, .08), 0 6px 18px rgba(16, 33, 29, .06);
  --sombra-sm:  0 1px 2px rgba(16, 33, 29, .10);
  --radio:      12px;
  --radio-sm:   8px;

  --ancho-max:  1080px;
  --fuente: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
}

/* -------------------------------------------------------------------------
   2. Reset ligero y base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--tinta);
  line-height: 1.65;
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--verde-500); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.25; color: var(--verde-900); margin: 0 0 .5em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: 1.8em; }
h3 { font-size: 1.2rem; margin-top: 1.4em; }

p { margin: 0 0 1em; }

/* Contenedor central reutilizable */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 1.2rem;
}

/* -------------------------------------------------------------------------
   3. Cabecera y navegación
   ------------------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-300);
}

.cabecera__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--verde-900);
}
.logo:hover { text-decoration: none; }
.logo__sol {
  width: 26px; height: 26px;
  display: inline-block; flex: 0 0 auto;
}

/* Menú */
.nav { display: flex; align-items: center; }
.nav__lista {
  list-style: none;
  display: flex;
  gap: 1.4rem;
  margin: 0; padding: 0;
}
.nav__link {
  color: var(--tinta);
  font-weight: 500;
  padding: .4rem 0;
}
.nav__link:hover { color: var(--verde-500); text-decoration: none; }

/* Botón hamburguesa (móvil) */
.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-sm);
  padding: .45rem .6rem;
  cursor: pointer;
  line-height: 0;
}
.nav__toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--verde-900);
  margin: 4px 0;
}

/* -------------------------------------------------------------------------
   4. Hero / cabecera de página
   ------------------------------------------------------------------------- */
.hero {
  background: linear-gradient(160deg, var(--verde-100) 0%, #ffffff 70%);
  padding: 3rem 0 2.5rem;
  border-bottom: 1px solid var(--gris-300);
}
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--verde-700);
  margin: 0 0 .6rem;
}
.hero p.lead {
  font-size: 1.15rem;
  color: var(--gris-600);
  max-width: 60ch;
}

/* Cabecera de página interior (más compacta) */
.pagehead { padding: 2.2rem 0 1.4rem; }
.pagehead .breadcrumb { margin-bottom: .8rem; }

/* Migas de pan */
.breadcrumb {
  font-size: .85rem;
  color: var(--gris-600);
}
.breadcrumb a { color: var(--gris-600); }
.breadcrumb a:hover { color: var(--verde-500); }
.breadcrumb span { margin: 0 .35rem; color: var(--gris-300); }

/* -------------------------------------------------------------------------
   5. Contenido principal
   ------------------------------------------------------------------------- */
main { padding: 2rem 0 3rem; }
.contenido { max-width: 760px; }
.contenido p, .contenido li { color: var(--tinta); }
.contenido ul, .contenido ol { padding-left: 1.3rem; }
.contenido li { margin-bottom: .4rem; }

/* Meta de artículo (fecha + autor) */
.meta-articulo {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  font-size: .85rem;
  color: var(--gris-600);
  border-top: 1px solid var(--gris-300);
  border-bottom: 1px solid var(--gris-300);
  padding: .7rem 0;
  margin: 1.2rem 0 2rem;
}
.meta-articulo strong { color: var(--verde-900); font-weight: 600; }

/* Placeholder de dato por verificar */
.verificar {
  background: #fff7e6;
  border: 1px dashed var(--sol-600);
  color: #8a5a00;
  border-radius: var(--radio-sm);
  padding: .1rem .4rem;
  font-size: .92em;
  font-style: italic;
}

/* -------------------------------------------------------------------------
   6. Tarjetas de cluster (home) y de enlaces
   ------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}
.grid--2 { }
.grid--4 { }

.card {
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 1.4rem;
  box-shadow: var(--sombra-sm);
  transition: box-shadow .18s ease, transform .18s ease;
  display: flex;
  flex-direction: column;
}
.card:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.card h3 { margin-top: 0; }
.card p { color: var(--gris-600); flex: 1; }
.card__tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--verde-700);
  background: var(--verde-100);
  border-radius: 999px;
  padding: .2rem .6rem;
  margin-bottom: .7rem;
  align-self: flex-start;
}
.card__link {
  font-weight: 600;
  margin-top: .8rem;
}
.card__link::after { content: " →"; }

/* Lista de sub-páginas dentro de un pilar */
.lista-satelites {
  list-style: none;
  padding: 0; margin: 1rem 0 0;
  display: grid; gap: .6rem;
}
.lista-satelites li a {
  display: block;
  border: 1px solid var(--gris-300);
  border-left: 4px solid var(--verde-500);
  border-radius: var(--radio-sm);
  padding: .8rem 1rem;
  color: var(--verde-900);
  font-weight: 500;
  background: var(--blanco);
  transition: background .15s ease;
}
.lista-satelites li a:hover { background: var(--gris-100); text-decoration: none; }

/* -------------------------------------------------------------------------
   7. Botones y CTA
   ------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-weight: 600;
  border-radius: var(--radio-sm);
  padding: .75rem 1.3rem;
  cursor: pointer;
  border: 1px solid transparent;
  font-size: 1rem;
  text-align: center;
  transition: background .15s ease, border-color .15s ease;
}
.btn--primario { background: var(--verde-700); color: #fff; }
.btn--primario:hover { background: var(--verde-900); text-decoration: none; }
.btn--sol { background: var(--sol-500); color: #3a2a00; }
.btn--sol:hover { background: var(--sol-600); text-decoration: none; }
.btn--fantasma { background: transparent; border-color: var(--verde-700); color: var(--verde-700); }
.btn--fantasma:hover { background: var(--verde-100); text-decoration: none; }

/* -------------------------------------------------------------------------
   8. Bloque reservado para afiliación / AdSense
   ------------------------------------------------------------------------- */
.bloque-afiliacion {
  background: linear-gradient(135deg, var(--verde-700), var(--verde-500));
  color: #fff;
  border-radius: var(--radio);
  padding: 1.8rem;
  margin: 2rem 0;
  text-align: center;
  box-shadow: var(--sombra);
}
.bloque-afiliacion h3 { color: #fff; margin-top: 0; }
.bloque-afiliacion p { color: rgba(255,255,255,.9); max-width: 52ch; margin: 0 auto 1.2rem; }
.bloque-afiliacion .btn--sol { box-shadow: var(--sombra-sm); }
.bloque-afiliacion small { display:block; margin-top: .9rem; color: rgba(255,255,255,.75); font-size: .78rem; }

/* Hueco AdSense genérico */
.ad-slot {
  border: 1px dashed var(--gris-300);
  background: var(--gris-100);
  border-radius: var(--radio-sm);
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris-600);
  font-size: .82rem;
  margin: 2rem 0;
  text-align: center;
}

/* -------------------------------------------------------------------------
   9. Calculadoras
   ------------------------------------------------------------------------- */
.calc {
  background: var(--gris-100);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 1.6rem;
  margin: 1.5rem 0;
}
.calc__grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo label { font-weight: 600; font-size: .92rem; color: var(--verde-900); }
.campo small { color: var(--gris-600); font-size: .8rem; }
.campo input, .campo select {
  padding: .65rem .75rem;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-sm);
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
}
.campo input:focus, .campo select:focus {
  outline: 2px solid var(--verde-500);
  outline-offset: 1px;
  border-color: var(--verde-500);
}

.calc__acciones { margin-top: 1.2rem; }

/* Resultado */
.resultado {
  margin-top: 1.4rem;
  background: #fff;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-sm);
  padding: 1.3rem;
}
.resultado[hidden] { display: none; }
.resultado__cifras {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-bottom: 1rem;
}
.cifra { text-align: center; padding: .5rem; }
.cifra .valor { font-size: 1.9rem; font-weight: 800; color: var(--verde-700); display: block; }
.cifra .etiqueta { font-size: .82rem; color: var(--gris-600); }

/* Disclaimer */
.disclaimer {
  font-size: .82rem;
  color: var(--gris-600);
  background: #fff7e6;
  border-left: 4px solid var(--sol-500);
  border-radius: var(--radio-sm);
  padding: .8rem 1rem;
  margin: 1.2rem 0;
}

/* -------------------------------------------------------------------------
   10. Secciones auxiliares
   ------------------------------------------------------------------------- */
.seccion-suave { background: var(--gris-100); padding: 2.5rem 0; margin-top: 2.5rem; }
.callout {
  border: 1px solid var(--gris-300);
  border-left: 4px solid var(--verde-500);
  background: var(--verde-100);
  border-radius: var(--radio-sm);
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
}

/* -------------------------------------------------------------------------
   11. Pie de página
   ------------------------------------------------------------------------- */
.footer {
  background: var(--verde-900);
  color: #cfe3da;
  padding: 2.5rem 0 1.5rem;
  margin-top: 3rem;
}
.footer a { color: #cfe3da; }
.footer a:hover { color: #fff; }
.footer__grid {
  display: grid;
  gap: 1.8rem;
  grid-template-columns: 1fr;
}
.footer h4 { color: #fff; font-size: .95rem; margin-bottom: .8rem; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: .4rem; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  font-size: .82rem;
  color: #9fbdb0;
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between;
}

/* -------------------------------------------------------------------------
   12. Responsive
   ------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .calc__grid { grid-template-columns: 1fr 1fr; }
  .resultado__cifras { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .resultado__cifras { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Menú colapsable en móvil */
@media (max-width: 820px) {
  .nav__toggle { display: inline-block; }
  .nav__lista {
    position: absolute;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--blanco);
    border-bottom: 1px solid var(--gris-300);
    box-shadow: var(--sombra);
    padding: .5rem 1.2rem 1rem;
    display: none;
  }
  .nav__lista.abierto { display: flex; }
  .nav__lista li { border-bottom: 1px solid var(--gris-100); }
  .nav__link { display: block; padding: .8rem 0; }
}

/* -------------------------------------------------------------------------
   13. Banner de consentimiento de cookies (CMP)
   ------------------------------------------------------------------------- */
.cc-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background: var(--blanco);
  border-top: 3px solid var(--verde-500);
  box-shadow: 0 -6px 24px rgba(16, 33, 29, .16);
}
.cc-inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.cc-text { font-size: .9rem; color: var(--tinta); line-height: 1.5; }
.cc-config {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.2rem;
  font-size: .9rem;
  padding: .3rem 0;
}
.cc-config label { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.cc-acciones { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.cc-acciones .btn {
  padding: .55rem 1rem;
  font-size: .92rem;
  border: 1px solid var(--gris-300);
  background: #fff;
  color: var(--verde-900);
}
.cc-acciones .btn--primario { background: var(--verde-700); color: #fff; border-color: var(--verde-700); }
.cc-acciones .btn--sol { background: var(--sol-500); color: #3a2a00; border-color: var(--sol-500); }

/* Enlace "Configurar cookies" inyectado en el pie */
.cc-reopen { color: #cfe3da; text-decoration: underline; font-size: .82rem; cursor: pointer; }
.cc-reopen:hover { color: #fff; }

@media (min-width: 760px) {
  .cc-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.2rem; }
  .cc-text { flex: 1; }
  .cc-config { flex: 0 0 100%; order: 3; }
  .cc-acciones { flex-shrink: 0; }
}