/*
 * Voltia — estilos propios de la portada.
 */

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--gap-cols);
  align-items: center;
  padding-block: 48px 72px;
  position: relative;
  z-index: 2;
}
.hero h1 { margin-block-end: 20px; }
.hero .lead { max-width: 46ch; margin-block-end: 30px; }

.hero__botones { display: flex; gap: 14px; flex-wrap: wrap; margin-block-end: 42px; }

.hero__datos { display: flex; gap: 40px; flex-wrap: wrap; }
.dato__numero {
  font-family: var(--font-title);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  margin-block-end: 6px;
}
.dato__etiqueta { font-size: .844rem; color: var(--txt-label); }

.hero__foto {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-image);
  border: 1px solid var(--bd-image);
  background-size: cover;
  background-position: center;
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 36px; padding-block: 24px 48px; }
  .hero__foto { aspect-ratio: 4 / 3; order: -1; }
}

/* ---------- Franja de marcas ---------- */
.marcas {
  border-block: 1px solid var(--bd-divider);
  background: var(--bg-stripe);
  padding-block: 22px;
  position: relative;
  z-index: 2;
}
.marcas__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.marcas__titulo {
  font-size: var(--fs-kicker);
  text-transform: uppercase;
  letter-spacing: var(--ls-kicker);
  color: var(--txt-muted);
}
.marcas__lista { display: flex; gap: 42px; flex-wrap: wrap; }
.marcas__lista li {
  font-family: var(--font-title);
  font-size: 1.063rem;
  font-weight: 600;
  color: rgba(234,240,255,.42);
}

/* ---------- Cómo funciona ---------- */
.paso__numero {
  font-family: var(--font-title);
  font-size: .938rem;
  font-weight: 700;
  color: var(--voltia-amber);
  margin-block-end: 46px;
  display: block;
}

/* ---------- Beneficios ---------- */
.bloque {
  border: 1px solid var(--bd-divider);
  border-radius: var(--r-block);
  background: var(--grad-section);
  padding: clamp(28px, 4vw, 56px);
}
.beneficio__valor {
  font-family: var(--font-title);
  font-size: 2.125rem;
  font-weight: 700;
  color: var(--voltia-amber);
  line-height: 1;
  margin-block-end: 14px;
}

/* ---------- Sistemas ---------- */
.sistema { display: flex; flex-direction: column; padding: 34px 30px; }
.sistema__precio {
  font-family: var(--font-title);
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1;
  margin-block: 18px 6px;
}
.sistema__desde { font-size: var(--fs-kicker); color: var(--txt-muted); }
.sistema__detalle { font-size: var(--fs-card); color: var(--txt-muted); margin-block-end: 22px; }
.sistema__lista { display: flex; flex-direction: column; gap: 11px; margin-block-end: 26px; }
.sistema__lista li {
  display: flex;
  gap: 10px;
  font-size: var(--fs-card);
  color: var(--txt-body);
}
.sistema__lista li::before {
  content: "✓";
  color: var(--voltia-amber);
  font-weight: 700;
  flex: none;
}
.sistema .boton { margin-block-start: auto; }

/* ---------- Proyectos ---------- */
.proyectos { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gap-grid); }
.proyecto {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--bd-image);
  display: flex;
  align-items: flex-end;
}
.proyecto__foto {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--t-image);
}
.proyecto:hover .proyecto__foto { transform: scale(1.04); }
.proyecto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,26,82,0) 40%, rgba(8,26,82,.92));
}
.proyecto__texto { position: relative; z-index: 2; padding: 26px; }
.proyecto__texto h3 { font-size: 1.313rem; margin-block-end: 4px; }
.proyecto__meta { font-size: .875rem; color: var(--voltia-amber); }

@media (max-width: 900px) { .proyectos { grid-template-columns: 1fr; } }

/* ---------- Nosotros ---------- */
.dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-cols);
  align-items: center;
}
.dos-columnas__foto {
  aspect-ratio: 5 / 4;
  border-radius: var(--r-image);
  border: 1px solid var(--bd-image);
  background-size: cover;
  background-position: center;
}
.mini-datos { display: flex; gap: 36px; flex-wrap: wrap; margin-block-start: 30px; }
.mini-dato__valor {
  font-family: var(--font-title);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--voltia-amber);
  line-height: 1;
  margin-block-end: 6px;
}
.mini-dato__etiqueta { font-size: var(--fs-card); color: var(--txt-body); }

@media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Preguntas frecuentes ---------- */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--gap-cols); align-items: start; }
.faq details { border-bottom: 1px solid var(--bd-card); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-block: 22px;
  font-family: var(--font-title);
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--voltia-amber);
  font-size: 1.5rem;
  line-height: 1;
  flex: none;
  transition: transform var(--t-fast);
}
.faq details[open] summary::after { content: "×"; }
.faq details p {
  font-size: .938rem;
  color: rgba(234,240,255,.68);
  margin-block-end: 22px;
  max-width: 62ch;
}

@media (max-width: 900px) { .faq { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Contacto ---------- */
.contacto {
  border-radius: var(--r-block);
  overflow: hidden;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
}
.contacto__izquierda {
  background: var(--grad-cta);
  padding: clamp(28px, 4vw, 56px);
}
.contacto__izquierda h2 { color: #fff; margin-block-end: 16px; }
.contacto__izquierda p { color: rgba(255,255,255,.86); margin-block-end: 30px; max-width: 44ch; }

.contacto__via { display: flex; align-items: center; gap: 14px; margin-block-end: 18px; }
.contacto__icono {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.16);
  display: grid;
  place-items: center;
  flex: none;
}
.contacto__via small { display: block; font-size: .75rem; color: rgba(255,255,255,.7); }
.contacto__via strong { font-size: .938rem; font-weight: 600; color: #fff; }

.contacto__derecha { background: var(--voltia-navy-900); padding: clamp(28px, 4vw, 48px); }

@media (max-width: 900px) { .contacto { grid-template-columns: 1fr; } }

/* ---------- Formulario ---------- */
.campo { margin-block-end: 16px; }
.campo label {
  display: block;
  font-size: var(--fs-kicker);
  color: var(--txt-label);
  margin-block-end: 7px;
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--bd-input);
  border-radius: var(--r-input);
  padding: 13px 15px;
  color: var(--voltia-ink);
  font-size: .938rem;
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--voltia-amber);
  outline: none;
}
.campo select option { background: var(--voltia-navy-700); }
.campos-par { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .campos-par { grid-template-columns: 1fr; } }

.nota-form {
  font-size: .781rem;
  color: var(--txt-muted);
  text-align: center;
  margin-block-start: 14px;
}

/* ---------- Calculadora ---------- */
.calculadora {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--r-card-l);
  overflow: hidden;
  background: #0B2566;
  border: 1px solid rgba(234,240,255,.16);
}
.calculadora__controles { padding: clamp(26px, 3.4vw, 40px); display: flex; flex-direction: column; }
.calculadora__titulo {
  font-size: clamp(1.5rem, 1rem + 1.6vw, 1.875rem);
  font-weight: 600;
  line-height: 1.08;
  margin-block-end: 14px;
}
.calculadora__lead { font-size: .938rem; color: var(--txt-body); line-height: 1.55; max-width: 34ch; margin-block-end: 32px; }

.calculadora__fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-block-end: 12px;
}
.calculadora__fila label { font-size: .875rem; font-weight: 500; color: var(--txt-body); }
.calculadora__fila output {
  font-family: var(--font-title);
  font-size: 1.625rem;
  font-weight: 700;
}

.calculadora input[type="range"] {
  width: 100%;
  height: 6px;
  accent-color: var(--voltia-amber);
  cursor: pointer;
}
.calculadora__escala {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--txt-muted);
  margin-block-start: 8px;
}
.calculadora__consumo {
  border-top: 1px solid var(--bd-card);
  padding-block-start: 18px;
  margin-block-start: 20px;
  font-size: .875rem;
  color: var(--txt-body);
}

.calculadora__resultados {
  padding: clamp(26px, 3.4vw, 40px);
  background: var(--bg-input);
  display: flex;
  flex-direction: column;
}
.resultado-principal { margin-block-end: 24px; }
.resultado__etiqueta { display: block; font-size: .781rem; color: var(--txt-label); }
.resultado-principal strong {
  display: block;
  font-family: var(--font-title);
  font-size: clamp(2rem, 1.2rem + 2.4vw, 2.875rem);
  font-weight: 700;
  color: var(--voltia-amber);
  line-height: 1.1;
}

.resultado-grilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--bd-input);
  border-radius: 14px;
  overflow: hidden;
  margin-block-end: 26px;
}
.resultado { background: #0B2566; padding: 18px 18px 20px; }
.resultado strong {
  display: block;
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 700;
  margin-block-end: 4px;
}
.resultado .resultado__etiqueta { font-size: .781rem; }

.calculadora__nota {
  font-size: .719rem;
  color: var(--txt-muted);
  margin-block-start: 14px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .calculadora { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .resultado-grilla { grid-template-columns: 1fr; }
}

/* ---------- Formulario en la portada ---------- */
.formulario__titulo {
  font-family: var(--font-title);
  font-size: 1.375rem;
  font-weight: 600;
  margin-block-end: 22px;
}

/* ============================================================
   Bloques agregados el 21/8/2026 con el contenido real
   ============================================================ */

/* Aclaración chica debajo de las cifras de la portada.
   Existe para que "+80 instalaciones" sea verificable: dice que incluye
   las que están en curso, en vez de dejar el número desnudo. */
.hero__aclaracion {
  margin-top: 18px;
  font-size: 0.812rem;
  color: var(--txt-muted);
  max-width: 42ch;
}

/* Bloque destacado a ancho completo: "A tu casa no va un vendedor".
   Lleva barra ámbar a la izquierda para que se lea como una afirmación
   con peso, distinta de las tarjetas informativas. */
.destacado {
  background: var(--grad-section);
  border: 1px solid var(--bd-card);
  border-left: 3px solid var(--voltia-amber);
  border-radius: var(--r-block);
  padding: clamp(1.75rem, 4vw, 3rem);
}

.destacado__texto {
  max-width: 62ch;
}

.destacado h2 {
  font-family: var(--font-title);
  font-size: var(--fs-h2);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}

/* Cierre de la sección de posventa: el 57 en grande.
   Es el dato que convierte la promesa de posventa en algo comprobable. */
.cifra-fuerte {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: var(--gap-cards);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg-flat);
  border: 1px solid var(--bd-card);
  border-radius: var(--r-card-l);
}

.cifra-fuerte strong {
  font-family: var(--font-title);
  font-size: clamp(3rem, 2rem + 5vw, 5rem);
  line-height: 1;
  color: var(--voltia-amber);
  flex-shrink: 0;
}

.cifra-fuerte p {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--txt-lead);
  max-width: 52ch;
}

@media (max-width: 640px) {
  .cifra-fuerte {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ------------------------------------------------------------
   Citas de Nicolás dentro de las secciones.
   Salen de la entrevista en el podcast Pleno Emprendo (E#332).
   Se distinguen de las tarjetas con la barra ámbar y la comilla.
   ------------------------------------------------------------ */
.cita-seccion {
  margin: 28px 0 0;
  padding: 22px 26px;
  background: var(--bg-flat);
  border-left: 3px solid var(--voltia-amber);
  border-radius: var(--r-card-s);
}

.cita-seccion blockquote {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
  line-height: 1.4;
  letter-spacing: var(--ls-title);
  color: var(--voltia-ink);
}

.cita-seccion blockquote::before { content: "\201C"; }
.cita-seccion blockquote::after  { content: "\201D"; }

.cita-seccion figcaption {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.cita-seccion figcaption strong { color: var(--voltia-ink); }

.cita-seccion figcaption span {
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--txt-muted);
}

/* Variante a todo el ancho, para abrir la sección de posventa. */
.cita-seccion--ancha {
  margin-block: 8px 28px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--grad-section);
  border: 1px solid var(--bd-card);
  border-left: 3px solid var(--voltia-amber);
  border-radius: var(--r-card-l);
}

.cita-seccion--ancha blockquote {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem);
  max-width: 34ch;
}

/* Bloque de arranque de la calculadora: más liviano que el destacado normal,
   para que no compita con la calculadora que viene justo abajo.
   Alineado a la izquierda, como el resto de la página (Nicolás, 23/8/2026). */
.destacado--suave {
  background: var(--bg-flat);
}

.destacado--suave .destacado__texto {
  max-width: 56ch;
}