/* Agently · maqueta de inicio
   Una sola forma (el bocadillo: tres esquinas redondas y una casi recta) para la forma grande,
   los botones, las viñetas y la banda. Colores y tipos solo desde estas variables. */

:root {
  --bg: #f6f6f3;
  --surface: #e6ebe7;
  --ink: #111614;
  --muted: #4a5550;
  --accent: #0f4d3a;
  --accent-ink: #ffffff;
  --accent-soft: #d7e6df;

  /* colores de profesionales en el panel */
  --prof-a: #0f4d3a;
  --prof-b: #8a5a12;

  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3vw, 3.75rem);
  --step-hero: clamp(2rem, 0.5rem + 4.4vw, 4.5rem);

  --margen: clamp(16px, 4vw, 48px);
  --hueco-seccion: clamp(96px, 12vw, 192px);

  /* la forma */
  --r: 1.5rem;
  --r-punta: 0.25rem;
  --forma: var(--r) var(--r) var(--r) var(--r-punta);
  --forma-espejo: var(--r) var(--r) var(--r-punta) var(--r);

  /* movimiento */
  --suave: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.5;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
h1 { font-size: var(--step-hero); }
h2 { font-size: var(--step-head); }
h3 { font-size: var(--step-lead); letter-spacing: -0.015em; line-height: 1.15; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }

.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: var(--margen); top: 8px; background: var(--ink); color: var(--bg); padding: 8px 12px; z-index: 10; }

/* Botones y enlaces */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.5rem;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--forma);
  font-weight: 500; text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease;
}
.boton:hover { background: var(--ink); }
.boton:active { transform: translateY(1px) scale(0.98); }
.boton-pequeno { min-height: 44px; padding: 0 1.125rem; font-size: var(--step-small); }
.boton-claro { background: var(--accent-ink); color: var(--accent); }
.boton-claro:hover { background: var(--accent-soft); }

.enlace { font-weight: 500; text-underline-offset: 0.25em; text-decoration-thickness: 2px; }
.enlace:hover { color: var(--accent); }
.enlace-claro:hover { color: var(--accent-soft); }

.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }

/* Barra */
.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 16px var(--margen);
}
.marca { font-weight: 600; font-size: 1.375rem; letter-spacing: -0.03em; text-decoration: none; }
.barra-enlaces { display: none; gap: 2rem; font-size: var(--step-small); }
.barra-enlaces a { text-decoration: none; }
.barra-enlaces a:hover { color: var(--accent); }

/* Portada */
.portada {
  position: relative;
  display: grid; gap: 3rem;
  padding: clamp(32px, 6vw, 72px) var(--margen) 0;
  overflow: hidden;
}
.entradilla { margin-top: 2rem; max-width: 38ch; font-size: var(--step-lead); line-height: 1.4; }

.portada-forma {
  /* la forma grande, cortada por el borde de la pantalla */
  background: var(--accent);
  border-radius: 3rem 3rem 0 0.5rem;
  margin-right: calc(var(--margen) * -1);
  padding: 2rem var(--margen) 3rem 1.25rem;
}

/* Chat (fragmento de interfaz) */
.chat { display: flex; flex-direction: column; gap: 0.625rem; max-width: 26rem; }
.msj {
  max-width: 85%;
  padding: 0.75rem 1rem;
  font-size: var(--step-body); line-height: 1.4;
}
.msj-cliente { align-self: flex-end; background: var(--accent-ink); color: var(--ink); border-radius: var(--forma-espejo); }
.msj-asistente { align-self: flex-start; background: var(--accent-soft); color: var(--ink); border-radius: var(--forma); }

/* Problema */
.problema {
  display: grid; gap: 1.5rem;
  padding: var(--hueco-seccion) var(--margen) 0;
}
.problema h2 { color: var(--muted); font-size: var(--step-lead); letter-spacing: -0.015em; }
.frase { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); line-height: 1.2; letter-spacing: -0.02em; max-width: 30ch; font-weight: 500; }

/* Cómo funciona */
.como { padding: var(--hueco-seccion) var(--margen) 0; }
.pasos { list-style: none; display: grid; gap: 1rem; margin-top: 2.5rem; }
.paso {
  background: var(--surface);
  border-radius: var(--forma);
  padding: 1.75rem 1.5rem 2rem;
  display: grid; gap: 0.75rem; align-content: start;
}
.paso:nth-child(2) { background: var(--accent-soft); }
.paso:nth-child(3) { background: var(--accent); color: var(--accent-ink); }
.paso p { max-width: 36ch; }

/* Qué incluye */
.incluye { padding: var(--hueco-seccion) 0 0; }
.incluye > h2 { padding: 0 var(--margen); }
.incluye-bloque { padding: 2.5rem var(--margen) 0; }
.incluye-texto { display: grid; gap: 1.25rem; align-content: start; }
.incluye-texto > p { max-width: 46ch; }

.lista { list-style: none; display: grid; gap: 0.875rem; max-width: 52ch; }
.lista li { position: relative; padding-left: 1.75rem; }
.lista li::before {
  /* la forma, a tamaño de texto */
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 0.8em; height: 0.65em;
  background: var(--accent);
  border-radius: 0.3em 0.3em 0.3em 0.06em;
}
.lista-clara li::before { background: var(--accent-ink); }
.chat-mis { background: var(--surface); border-radius: var(--forma); padding: 1.25rem; max-width: 30rem; margin-bottom: 0.5rem; }
.chat-mis .msj-cliente { background: var(--accent); color: var(--accent-ink); }
.chat-mis .msj-asistente { background: var(--bg); }

.banda {
  /* la banda a todo el ancho que separa las dos mitades */
  margin-top: var(--hueco-seccion);
  background: var(--accent); color: var(--accent-ink);
  padding: clamp(56px, 8vw, 120px) var(--margen);
  display: grid; gap: 3rem;
}

/* Panel (fragmento de interfaz) */
.panel {
  background: var(--bg); color: var(--ink);
  border-radius: var(--forma);
  padding: 1.25rem;
  align-self: start;
}
.panel-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.panel-dia { font-weight: 500; font-size: var(--step-lead); letter-spacing: -0.015em; }
.panel-pestanas { display: flex; gap: 0.375rem; }
.pestana { padding: 0.375rem 0.75rem; border-radius: var(--forma); font-size: var(--step-small); font-weight: 500; background: var(--surface); }
.pestana-a.activa { background: var(--prof-a); color: #fff; }
.pestana-b { color: var(--prof-b); }
.panel-filas { display: grid; gap: 0.375rem; }
.fila { display: grid; grid-template-columns: 3.5rem 1fr; align-items: stretch; gap: 0.5rem; }
.hora { font-size: var(--step-small); color: var(--muted); padding-top: 0.7rem; font-variant-numeric: tabular-nums; }
.cita {
  padding: 0.625rem 0.875rem; border-radius: var(--forma);
  font-size: var(--step-small); font-weight: 500;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem;
}
.cita em { font-style: normal; font-weight: 400; }
.cita-a { background: var(--accent-soft); border-left: 4px solid var(--prof-a); }
.novino { color: var(--muted); }
.novino em { color: #8a2a12; font-weight: 500; }
.nueva { background: var(--prof-a); color: #fff; }
.nueva em { color: var(--accent-soft); }
.libre { background: transparent; border: 2px dashed var(--surface); color: var(--muted); font-weight: 400; }
.bloqueo { background: var(--surface); color: var(--muted); font-weight: 400; }

/* Sectores */
.sectores {
  padding: var(--hueco-seccion) var(--margen) 0;
  display: grid; gap: 2.5rem;
}
.sectores-lista { display: grid; gap: 1.25rem; align-content: start; }
.sectores-lista > p { max-width: 40ch; }
.selector { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.sector {
  font: inherit; font-size: var(--step-body); font-weight: 500;
  min-height: 48px; padding: 0 1.125rem;
  background: var(--surface); color: var(--ink);
  border: 0; border-radius: var(--forma);
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}
.sector:hover { background: var(--accent-soft); }
.sector:active { transform: scale(0.98); }
.sector[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.nota { color: var(--muted); }

.sectores-chat {
  background: var(--accent);
  border-radius: 3rem 3rem 3rem 0.5rem;
  padding: 2rem 1.25rem;
  display: grid; gap: 2.5rem;
  min-height: 22rem;
}
.chat-titulo { color: var(--accent-ink); font-weight: 500; font-size: var(--step-small); margin-bottom: 0.25rem; }
.js .chat-sector { display: none; }
.js .chat-sector.activo { display: flex; }

/* A medida */
.medida {
  padding: var(--hueco-seccion) var(--margen) 0;
  display: grid; gap: 2rem;
}
.medida-texto { display: grid; gap: 1.5rem; justify-items: start; max-width: 52ch; }
.medida-texto > p { font-size: var(--step-lead); line-height: 1.35; }

/* Preguntas */
.preguntas {
  padding: var(--hueco-seccion) var(--margen) 0;
  display: grid; gap: 2rem;
}
.acordeon { display: grid; gap: 0.5rem; }
.acordeon details { background: var(--surface); border-radius: var(--forma); transition: background-color 200ms ease; }
.acordeon details[open] { background: var(--accent); color: var(--accent-ink); }
.acordeon summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 64px; padding: 1rem 1.25rem;
  font-weight: 500; font-size: var(--step-body);
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
  content: "+"; font-size: 1.5rem; line-height: 1; font-weight: 400; flex: none;
  transition: transform 200ms ease;
}
.acordeon details[open] summary::after { transform: rotate(45deg); }
.acordeon details p { padding: 0 1.25rem 1.5rem; max-width: 56ch; }
.pendiente { font-style: italic; }

/* Contacto */
.contacto {
  margin: var(--hueco-seccion) var(--margen) 0;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 3rem 3rem 3rem 0.5rem;
  padding: clamp(40px, 7vw, 104px) clamp(24px, 6vw, 96px);
  display: grid; gap: 1.25rem;
}
.contacto > p { font-size: var(--step-lead); max-width: 34ch; line-height: 1.35; }
.contacto .acciones { margin-top: 1rem; }

/* Pie */
.pie { padding: clamp(120px, 12vw, 160px) var(--margen) 32px; }
.pie-marca {
  font-weight: 600; letter-spacing: -0.06em; line-height: 0.8;
  font-size: 26vw; color: var(--accent);
  margin-left: -0.04em;
}
.pie-filas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem;
  margin-top: 2.5rem; font-size: var(--step-small); color: var(--muted);
}
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.pie-enlaces a:hover { color: var(--accent); }

/* Entradas suaves (solo con JS y sin reducir movimiento) */
@media (prefers-reduced-motion: no-preference) {
  .js .aparece { opacity: 0; transform: translateY(20px); transition: opacity 600ms ease, transform 600ms cubic-bezier(.2,.7,.2,1); }
  .js .aparece.visible { opacity: 1; transform: none; }
  /* Portada: la forma entra, luego el texto, luego la conversación mensaje a mensaje */
  .js .portada-forma { opacity: 0; transform: translateX(48px); animation: entra 1400ms var(--suave) 100ms forwards; }
  .js .portada-texto > * { opacity: 0; transform: translateY(18px); animation: entra 1100ms var(--suave) forwards; }
  .js .portada-texto > :nth-child(1) { animation-delay: 250ms; }
  .js .portada-texto > :nth-child(2) { animation-delay: 450ms; }
  .js .portada-texto > :nth-child(3) { animation-delay: 650ms; }
  /* cada mensaje brota desde la esquina de su bocadillo */
  .js .portada .msj { opacity: 0; transform: translateY(10px) scale(0.92); animation: entra 900ms var(--suave) forwards; }
  .js .portada .msj-cliente { transform-origin: 100% 100%; }
  .js .portada .msj-asistente { transform-origin: 0% 100%; }
  .js .portada .msj:nth-child(1) { animation-delay: 1300ms; }
  .js .portada .msj:nth-child(2) { animation-delay: 2700ms; }
  .js .portada .msj:nth-child(3) { animation-delay: 4100ms; }
  .js .portada .msj:nth-child(4) { animation-delay: 5300ms; }
  .js .chat-sector.activo .msj { animation: entra 380ms cubic-bezier(.2,.7,.2,1) both; }
  .js .chat-sector.activo .msj:nth-child(3) { animation-delay: 80ms; }
  .js .chat-sector.activo .msj:nth-child(4) { animation-delay: 160ms; }
  .js .chat-sector.activo .msj:nth-child(5) { animation-delay: 240ms; }
}
@keyframes entra { to { opacity: 1; transform: none; } }

/* Tablet */
@media (min-width: 720px) {
  .pasos { grid-template-columns: repeat(3, 1fr); }
  .paso { min-height: 18rem; }
  .paso:nth-child(2) { margin-top: 2.5rem; }
  .paso:nth-child(3) { margin-top: 5rem; }
  .sectores-chat { padding: 3rem 2.5rem; }
}

/* Ordenador */
@media (min-width: 1024px) {
  .barra-enlaces { display: flex; }
  .barra { padding-top: 24px; padding-bottom: 24px; }

  .portada {
    grid-template-columns: 7fr 5fr; align-items: center;
    min-height: calc(100svh - 92px);
    padding-top: 0; padding-bottom: 0;
  }
  .portada-forma {
    align-self: stretch;
    display: flex; align-items: center;
    border-radius: 14rem 0 0 1rem;
    padding: 4rem var(--margen) 4rem 5rem;
    margin-right: calc(var(--margen) * -1);
  }
  .portada-forma .chat { width: 100%; max-width: 30rem; }
  .portada-forma .msj { font-size: var(--step-lead); }

  .problema { grid-template-columns: 1fr 1fr; align-items: start; }

  .incluye-bloque { display: grid; grid-template-columns: 1fr 1fr; }
  .incluye-bloque .incluye-texto { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: var(--margen); }
  .incluye-bloque .lista { grid-column: 2; grid-row: 1 / span 2; }
  .incluye-bloque h3 { grid-column: 1; grid-row: 1; }
  .incluye-bloque .chat-mis { grid-column: 1; grid-row: 2; }
  .banda { grid-template-columns: 1fr 1fr; column-gap: var(--margen); align-items: center; }
  .panel { padding: 1.75rem; }

  .sectores { grid-template-columns: 5fr 7fr; column-gap: var(--margen); align-items: start; }
  .sectores-chat { padding: 3.5rem 4rem; min-height: 30rem; align-content: center; }
  .sectores-chat .chat { max-width: 30rem; }

  .medida { grid-template-columns: 1fr 1fr; column-gap: var(--margen); }
  .preguntas { grid-template-columns: 4fr 8fr; column-gap: var(--margen); align-items: start; }
  .preguntas h2 { position: sticky; top: 32px; }

  .contacto { grid-template-columns: 1fr 1fr; column-gap: var(--margen); align-items: end; }
  .contacto h2 { grid-column: 1; }
  .contacto > p { grid-column: 1; }
  .contacto .acciones { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; margin: 0; }
}

/* Páginas legales: una columna de lectura con la misma letra, colores y forma */
.legal { padding: clamp(32px, 6vw, 72px) var(--margen) 0; display: grid; gap: 2.5rem; }
.legal-cabecera { display: grid; gap: 1rem; }
.legal-cabecera h1 { font-size: var(--step-head); }
.legal-cabecera p { color: var(--muted); }
.legal-cuerpo { display: grid; gap: 2.5rem; max-width: 70ch; }
.legal-cuerpo section { display: grid; gap: 0.875rem; }
.legal-cuerpo h2 { font-size: var(--step-lead); letter-spacing: -0.015em; line-height: 1.15; }
.legal-cuerpo .lista { max-width: none; }
.legal-datos {
  background: var(--surface); border-radius: var(--forma);
  padding: 1.5rem; display: grid; gap: 0.5rem;
}
.legal > * { min-width: 0; }
.legal-datos p { display: grid; gap: 0.125rem; }
.legal-datos span { overflow-wrap: anywhere; }
.legal-datos strong { font-weight: 500; }
.legal-volver { justify-self: start; }

@media (min-width: 1024px) {
  .legal { grid-template-columns: 4fr 8fr; column-gap: var(--margen); align-items: start; }
  .legal-cabecera { position: sticky; top: 32px; }
  .legal-datos p { grid-template-columns: 9rem 1fr; gap: 0 1rem; }
}

/* Formulario de contacto (dentro del bloque verde) */
.boton-suave { background: var(--accent-soft); color: var(--ink); }
.boton-suave:hover { background: var(--accent-ink); }
.boton[aria-expanded="true"] { background: var(--accent-ink); color: var(--accent); }

.formulario { display: grid; gap: 1rem; max-width: 40rem; margin-top: 1.5rem; }
.formulario[hidden] { display: none; }
.campo { display: grid; gap: 0.375rem; }
.campo label { font-weight: 500; font-size: var(--step-small); }
.campo input, .campo textarea {
  font: inherit; font-size: var(--step-body); color: var(--ink);
  background: var(--bg); border: 2px solid transparent;
  border-radius: var(--forma);
  padding: 0.875rem 1rem; min-height: 52px; width: 100%;
  transition: border-color 160ms ease;
}
.campo textarea { resize: vertical; min-height: 8rem; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--muted); }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.campo [aria-invalid="true"] { border-color: #f2b8a8; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* campo oculto para robots, no es una línea — taste-skill-ignore */
.acepto { display: flex; gap: 0.75rem; align-items: flex-start; font-size: var(--step-small); }
.acepto input { width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; accent-color: var(--accent-ink); flex: none; }
.acepto .enlace:hover { color: var(--accent-soft); }
.formulario-info { font-size: var(--step-small); color: var(--accent-soft); max-width: 60ch; }
.formulario-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.formulario-pie .boton { border: 0; cursor: pointer; font: inherit; font-weight: 500; }
.formulario-pie .boton:disabled { opacity: 0.7; cursor: progress; }
.formulario-estado { font-weight: 500; }
.formulario-estado a { color: inherit; }

@media (prefers-reduced-motion: no-preference) {
  .js .formulario:not([hidden]) { animation: despliega 700ms var(--suave) both; }
}
@keyframes despliega { from { opacity: 0; transform: translateY(12px); } }
@media (min-width: 1024px) {
  .formulario { grid-column: 1 / -1; }
}