/* ═══════════════════════════════════════════════════════════════════════════
   3-piezas-repetidas.css   ·   ElConta.online
   ───────────────────────────────────────────────────────────────────────────
   Aquí viven las piezas que ANTES estaban copiadas en 20 bloques distintos.
   Ahora se escriben UNA sola vez y todas las páginas las usan.

   Contenido:
     1. Etiqueta verde (eyebrow)      6. Palomita ✓  (chk)
     2. Títulos de sección            7. Banner negro de cierre (CTA)
     3. Botones (oscuro / verde)      8. Cita en cursiva
     4. Tarjeta genérica              9. Barras animadas
     5. Píldoras / etiquetas         10. Ayudas varias
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── 1. ETIQUETA VERDE PEQUEÑA (eyebrow) ───────────────────────────────────
   El textito verde en mayúsculas que va encima de casi todos los títulos.
   Variante con línea: <p class="etiqueta con-linea">...</p>                    */
.etiqueta{
  display:block;
  font-size:11px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--VERDE);
  margin-bottom:14px;
}
.etiqueta.con-linea{
  display:flex;
  align-items:center;
  gap:14px;
}
.etiqueta.con-linea::before{
  content:"";
  width:30px;
  height:1px;
  background:var(--VERDE);
  flex-shrink:0;
}


/* ─── 2. TÍTULOS DE SECCIÓN ─────────────────────────────────────────────────
   Fraunces fino. La palabra clave se resalta con <em> (sale en verde cursiva).
   .titulo-hero = el gigante que abre la página · .titulo = el de cada sección  */
.titulo-hero,
.titulo{
  font-family:var(--LETRA-TITULOS);
  font-weight:300;
  color:var(--NEGRO);
  line-height:1.05;
  letter-spacing:-1.5px;
}
.titulo-hero{
  font-size:var(--TITULO-HERO);
  line-height:1.0;
  letter-spacing:-2px;
}
.titulo{
  font-size:var(--TITULO-SECCION);
}
.titulo-hero em,
.titulo em{
  font-style:italic;
  color:var(--VERDE);
}


/* ─── 3. BOTONES ────────────────────────────────────────────────────────────
   Se usan como <a> (enlace real) o <button>. Dos colores:
     .boton.oscuro  → fondo negro   · .boton.verde → fondo verde
   Píldora, centrado, con hover.                                               */
.boton{
  display:inline-block;
  padding:14px 28px;
  border:none;
  border-radius:var(--REDONDEO-BOTON);
  font-family:var(--LETRA-TEXTO);
  font-size:15px;
  font-weight:500;
  line-height:1;
  text-align:center;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--SUAVE);
}
.boton.oscuro{ background:var(--NEGRO);  color:var(--BLANCO); }
.boton.oscuro:hover{ background:#333333; }
.boton.verde{  background:var(--VERDE);  color:var(--BLANCO); }
.boton.verde:hover{  background:var(--VERDE-OSCURO); }
.boton.ancho{ display:block; width:100%; }   /* botón que ocupa todo el ancho */


/* ─── 4. TARJETA GENÉRICA ───────────────────────────────────────────────────
   Caja blanca con borde gris que se ilumina en verde al pasar el mouse.
   Base de las tarjetas de servicios y módulos.                                */
.tarjeta{
  background:var(--BLANCO);
  border:1px solid var(--GRIS-BORDE);
  border-radius:var(--REDONDEO-CAJA);
  padding:28px;
  transition:border-color var(--SUAVE), background var(--SUAVE), transform var(--SUAVE);
}
.tarjeta.animada:hover{
  background:var(--VERDE-SUAVE);
  border-color:var(--VERDE-BORDE);
  transform:translateY(-3px);   /* se levanta un poquito */
}


/* ─── 5. PÍLDORAS Y ETIQUETAS-TAG ───────────────────────────────────────────
   Los "chips" redondeados: perfiles de cliente, categorías, etc.              */
.pildora{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 18px;
  border:1px solid var(--GRIS-BORDE);
  border-radius:var(--REDONDEO-BOTON);
  background:var(--BLANCO);
  color:var(--GRIS-FUERTE);
  font-size:13px;
  user-select:none;
  transition:all var(--SUAVE);
}
.pildora:hover{
  background:var(--VERDE-SUAVE);
  border-color:var(--VERDE);
  color:var(--VERDE);
}


/* ─── 6. PALOMITA ✓ (check) ─────────────────────────────────────────────────
   El círculo verde con el visto bueno. ANTES este SVG estaba escrito a mano
   48 veces. Ahora se escribe una vez en el HTML así:
       <span class="check"><svg viewBox="0 0 10 10">...</svg></span>           */
.check{
  flex-shrink:0;
  width:20px;
  height:20px;
  min-width:20px;
  margin-top:1px;
  background:rgba(34,197,94,.15);   /* verde translúcido (VERDE-BRILLANTE al 15%) */
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.check svg{
  width:10px;
  height:10px;
  display:block;
}
.check svg path{
  stroke:var(--VERDE-BRILLANTE);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}


/* ─── 7. BANNER NEGRO DE CIERRE (CTA) ───────────────────────────────────────
   La franja negra con círculo verde decorativo y formulario, al final de las
   páginas. Estaba repetida en 4 bloques; aquí una sola vez.                   */
.banner-cierre{
  background:var(--NEGRO);
  border-radius:var(--REDONDEO-TARJETA);
  padding:52px 64px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:64px;
  align-items:center;
  position:relative;
  overflow:hidden;
  max-width:var(--ANCHO-MAXIMO);
  margin:0 auto;
}
/* el círculo verde tenue de la esquina */
.banner-cierre::before{
  content:"";
  position:absolute;
  top:-70px;
  left:-70px;
  width:240px;
  height:240px;
  background:var(--VERDE);
  border-radius:50%;
  opacity:.1;
  pointer-events:none;
}
.banner-cierre h2{
  font-family:var(--LETRA-TITULOS);
  font-size:var(--TITULO-BANNER);
  font-weight:300;
  color:var(--BLANCO);
  letter-spacing:-1px;
  line-height:1.15;
  margin-bottom:12px;
}
.banner-cierre p{
  font-size:14px;
  font-weight:300;
  color:rgba(255,255,255,.45);
  line-height:1.7;
  max-width:460px;
}
/* el mini-formulario del banner (nombre + correo + botón) */
.banner-cierre .formulario{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:300px;
}
.banner-cierre input{
  width:100%;
  padding:14px 22px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--REDONDEO-BOTON);
  font-family:var(--LETRA-TEXTO);
  font-size:14px;
  font-weight:300;
  color:rgba(255,255,255,.85);
  transition:border-color var(--SUAVE);
}
.banner-cierre input::placeholder{ color:rgba(255,255,255,.35); }
.banner-cierre input:focus{ border-color:rgba(34,197,94,.4); outline:none; }


/* ─── 8. CITA EN CURSIVA ────────────────────────────────────────────────────
   La frase destacada con barra verde a la izquierda.                          */
.cita{
  display:block;
  border-left:2px solid var(--VERDE);
  padding-left:20px;
  font-family:var(--LETRA-TITULOS);
  font-size:16px;
  font-weight:300;
  font-style:italic;
  color:var(--GRIS-FUERTE);
  line-height:1.6;
}


/* ─── 9. BARRAS ANIMADAS ────────────────────────────────────────────────────
   Las barritas de progreso que se llenan al hacer scroll (hero de inicio y de
   personas). El ancho lo controla el atributo data-ancho="92" en el HTML,
   y el archivo 2-funciones.js las anima. Colores por clase.                   */
.barra-fila{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.barra-etiqueta{
  font-size:12px;
  color:rgba(255,255,255,.6);
  min-width:110px;
}
.barra-riel{
  flex:1;
  height:4px;
  background:rgba(255,255,255,.08);
  border-radius:2px;
  overflow:hidden;
}
.barra-relleno{
  height:100%;
  width:0;                 /* arranca en 0; el JS la lleva a su data-ancho */
  border-radius:2px;
  background:var(--VERDE-BRILLANTE);
  transition:width 1.2s cubic-bezier(.4,0,.2,1);
}
.barra-relleno.roja{     background:#ef4444; }
.barra-relleno.naranja{  background:#f59e0b; }
.barra-relleno.verde{    background:var(--VERDE-BRILLANTE); }
.barra-valor{
  font-size:12px;
  font-weight:500;
  min-width:36px;
  text-align:right;
  color:rgba(255,255,255,.5);
}


/* ─── 10. AYUDAS VARIAS ─────────────────────────────────────────────────────*/
.solo-lectores{                 /* texto visible solo para lectores de pantalla / SEO */
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}