/* =========================================
   AGENTIKO.TECH — Home (rediseño 10-2026)
   Solo lo propio de index.html; la base está en sitio.css.

   Idea: la home es un índice. Quien llega busca su sector y encuentra el
   producto y el cliente que ya lo usa. Todo lo demás es secundario y va
   callado; el índice del hero es lo único con volumen.
   ========================================= */

/* =========================================
   HERO: titular + índice de sectores
   ========================================= */
.hero { padding: clamp(2.75rem, 7vw, 5rem) 0 clamp(3rem, 7vw, 5.5rem); }
.hero__titulo {
  font: 800 clamp(2.05rem, 5.4vw, 4.4rem)/1.02 var(--f-display);
  letter-spacing: -.035em;
  max-width: 21ch;
  text-wrap: balance;
}
.hero__bajada {
  margin-top: 1.5rem; max-width: 56ch;
  font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: var(--tinta-2); text-wrap: pretty;
}

.indice { margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.indice__pregunta { font: 600 1rem/1.3 var(--f-display); color: var(--tinta-2); padding-bottom: .9rem; }
.indice__estado { font-size: .95rem; color: var(--tinta-2); display: flex; align-items: baseline; gap: .55rem; }
.indice__estado::before {
  content: ''; flex: none; width: .55rem; height: .55rem; border-radius: 50%;
  border: 1.5px solid currentColor; transform: translateY(-.05rem);
}
.indice__estado--vivo::before { background: var(--naranja); border-color: var(--naranja); }

/* =========================================
   SECCIONES GENÉRICAS
   ========================================= */
.bloque { padding: clamp(4rem, 9vw, 7rem) 0; }
.bloque__titulo {
  font: 800 clamp(1.9rem, 4vw, 3rem)/1.08 var(--f-display);
  letter-spacing: -.03em; max-width: 22ch; text-wrap: balance;
}
.bloque__intro { margin-top: 1rem; max-width: 60ch; color: var(--tinta-2); font-size: 1.1rem; text-wrap: pretty; }

/* =========================================
   FICHAS DE PRODUCTO
   Una fila por producto, no tarjetas: el nombre y quién lo usa a la
   izquierda, qué hace a la derecha.
   ========================================= */
.fichas { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 2px solid var(--tinta); }
.ficha {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-bottom: 1px solid var(--linea);
}
.ficha__nombre { font: 800 clamp(1.7rem, 3.2vw, 2.4rem)/1.05 var(--f-display); letter-spacing: -.03em; }
.ficha__para { margin-top: .35rem; font-weight: 600; color: var(--tinta-2); }
.ficha__estado { margin-top: 1rem; font-size: .95rem; display: flex; align-items: baseline; gap: .55rem; color: var(--tinta-2); }
.ficha__estado::before {
  content: ''; flex: none; width: .55rem; height: .55rem; border-radius: 50%;
  border: 1.5px solid currentColor;
}
.ficha__estado--vivo { color: var(--tinta); }
.ficha__estado--vivo::before { background: var(--naranja); border-color: var(--naranja); }
.ficha__estado strong { font-weight: 600; }

.ficha__texto { max-width: 62ch; text-wrap: pretty; }
.ficha__puntos { margin-top: 1.1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem 1.5rem; }
.ficha__puntos li { padding-left: 1.1rem; position: relative; color: var(--tinta-2); font-size: .98rem; }
.ficha__puntos li::before { content: ''; position: absolute; left: 0; top: .72em; width: .5rem; height: 1.5px; background: var(--violeta); }
.ficha__acciones { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.enlace {
  font-weight: 600; color: var(--violeta); text-decoration: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: .22em;
}
.enlace:hover { color: var(--violeta-osc); text-decoration-thickness: 2.5px; }

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

/* =========================================
   PLATAFORMA (banda invertida)
   ========================================= */
.plataforma { background: var(--noche); color: var(--noche-texto); }
.plataforma .bloque__intro { color: var(--noche-2); }
.plataforma__grid {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2.5rem clamp(1.25rem, 2.5vw, 2.5rem);
}
.pieza { border-top: 1px solid #3B3566; padding-top: 1.25rem; }
.pieza h3 { font: 700 1.25rem/1.2 var(--f-display); letter-spacing: -.01em; color: #fff; }
.pieza p { margin-top: .6rem; color: var(--noche-2); font-size: .98rem; }
.pieza a { color: #C9BEFF; }
.plataforma :focus-visible { outline-color: #C9BEFF; }

/* =========================================
   A MEDIDA + SERVICIOS
   ========================================= */
.medida { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); }
.medida__casos { display: grid; gap: 0; border-top: 2px solid var(--tinta); }
.caso { padding: 1.4rem 0; border-bottom: 1px solid var(--linea); }
.caso h3 { font: 700 1.3rem/1.2 var(--f-display); letter-spacing: -.015em; }
.caso h3 span { font: 500 .95rem/1 var(--f-texto); color: var(--tinta-2); margin-left: .5rem; letter-spacing: 0; }
.caso p { margin-top: .4rem; color: var(--tinta-2); max-width: 60ch; }
@media (max-width: 860px) { .medida { grid-template-columns: 1fr; } }

/* =========================================
   NOTAS
   ========================================= */
.notas { background: var(--papel-2); }
.notas__lista { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3rem); }
.nota { border-top: 2px solid var(--tinta); padding-top: 1rem; }
.nota h3 { font: 700 1.15rem/1.25 var(--f-display); }
.nota h3 a { text-decoration: none; }
.nota h3 a:hover { color: var(--violeta); text-decoration: underline; text-underline-offset: .2em; }
.nota p { margin-top: .5rem; color: var(--tinta-2); font-size: .98rem; }
.notas__mas { margin-top: 2.5rem; }

/* =========================================
   CONTACTO
   ========================================= */
.contacto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.canales { margin-top: 2rem; display: grid; gap: 0; border-top: 1px solid var(--linea); }
.canal { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--linea); text-decoration: none; }
.canal span:first-child { color: var(--tinta-2); }
.canal span:last-child { font-weight: 600; }
.canal:hover span:last-child { color: var(--violeta); }

.formulario {
  background: #fff; border: 1px solid var(--linea); border-radius: 10px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.campo { margin-bottom: 1.1rem; }
.campos-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .campos-dos { grid-template-columns: 1fr; } }
.campo label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .4rem; }
.campo label small { font-weight: 400; color: var(--tinta-2); font-size: .85rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--tinta);
  background: var(--papel); border: 1.5px solid var(--linea); border-radius: var(--r);
  padding: .7rem .85rem; min-height: 46px;
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--violeta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--violeta) 20%, transparent); }
.form-submit { width: 100%; margin-top: .5rem; }
.form-submit:disabled { opacity: .7; cursor: wait; }


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


/* =========================================
   CIBERSEGURIDAD
   Filas como las del catálogo, sin escena: cada servicio lleva a su página.
   ========================================= */
.seguridad { background: var(--papel-2); }
.seguridad__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); }
.seguridad__lista { border-top: 2px solid var(--tinta); }
.seguridad__lista a { display: block; padding: 1.25rem 0; border-bottom: 1px solid var(--linea); text-decoration: none; }
.seguridad__lista strong { display: block; font: 700 clamp(1.2rem, 2vw, 1.45rem)/1.2 var(--f-display); letter-spacing: -.015em; }
.seguridad__lista span { display: block; margin-top: .35rem; color: var(--tinta-2); max-width: 52ch; }
.seguridad__lista a:hover strong { color: var(--violeta); }
@media (max-width: 860px) { .seguridad__grid { grid-template-columns: 1fr; } }