/* ==========================================================================
   GFG Seguros — páginas de servicio (seguros/*.html)
   Réplica del frame de Figma "SERVICIO X — Desktop" (1440 px, contenido de 1280 px).
   Se carga DESPUÉS de styles.css: reutiliza sus tokens (:root), botones, marca y pie de página.
   ========================================================================== */

/* ------------------------------ Piezas comunes ------------------------------ */
.svc-h2 {
  font-size: 36px; font-weight: 800; line-height: 44px;
  color: var(--navy-900);
}
.svc-h2--left { text-align: left; }
.svc-h2--lg { font-size: 40px; }

.svc-section { padding: var(--pad) 0; }   /* --pad: 80 / 64 / 56, en styles.css */
.svc-section--white { background: var(--white); }

.svc-head {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-bottom: 48px; text-align: center;
}

.svc-note { margin-top: 16px; font-size: 12px; line-height: 18px; color: var(--slate-500); }

/* ------------------------------ Hero ------------------------------ */
/* Mismo tratamiento que el hero de la home (imagen + velo negro 20 % con degradado hacia abajo): así el
   header transparente de vidrio se ve igual que allá. El Figma usa de fondo una captura de otro sitio
   (con texto en inglés), por eso no se copió esa imagen. */
.svc-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: 460px; padding: 128px 0 64px;   /* más bajo que el de la home: se lee como página interna */
  color: var(--white);
  /* cada página pone su foto como background-image en el atributo style del <section>: así la ruta se resuelve
     desde la página y no desde esta hoja (un url() dentro de una variable CSS se resolvería desde assets/css/) */
  background-color: var(--footer);
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
/* Velo navy de marca, más denso del lado del texto: unifica fotos de distinto origen con la paleta del sitio */
.svc-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    var(--hero-top-shade),
    linear-gradient(90deg,
      color-mix(in srgb, var(--footer) 88%, transparent) 0%,
      color-mix(in srgb, var(--footer) 62%, transparent) 50%,
      color-mix(in srgb, var(--footer) 30%, transparent) 100%);
}
.svc-hero .container { position: relative; z-index: 1; }
.svc-hero-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 760px; text-align: left; }
.svc-hero h1 {
  font-size: 52px; font-weight: 800; line-height: 56px;
  color: var(--white);
}
.svc-lead { font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, .92); }
.svc-cta { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px; }

/* ------------------------------ Qué es ------------------------------ */
.svc-desc { display: flex; align-items: center; gap: 64px; }
.svc-desc-copy {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
}
.svc-desc-copy p { font-size: 16px; line-height: 26px; color: var(--slate-500); }
.svc-desc-img, .svc-desc-visual {
  flex: none; width: 500px; height: 360px;
  border-radius: 16px; object-fit: cover;
}
/* Sin foto todavía: panel de marca con el ícono del servicio. Las fotos las baja tools/fotos.py */
.svc-desc-visual {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy-900), var(--blue-600));
  color: var(--white);
}
.svc-desc-visual::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 82% 14%, rgba(255, 255, 255, .22), transparent 46%),
    radial-gradient(circle at 8% 92%, rgba(255, 255, 255, .10), transparent 42%);
}
.svc-desc-visual .icon { position: relative; width: 132px; height: 132px; stroke-width: 1.25; }

/* Imagen con bleed: en escritorio ocupa la mitad derecha de la sección, del centro de la pantalla hasta el borde
   derecho y de arriba a abajo, con el lado del texto cortado en chevrón con vértices redondeados (mismo lenguaje
   que Gestoría en la home).
   Sin tarjeta: la sección sigue siendo blanca. La máscara (--chevron-left / --chevron-down) está en styles.css. */
.svc-section--bleed { position: relative; overflow: hidden; }
.svc-section--bleed .svc-desc { min-height: 400px; }
.svc-section--bleed .svc-desc-copy { flex: none; width: calc(50% - 56px); }
.svc-section--bleed .svc-desc-img, .svc-section--bleed .svc-desc-visual {
  /* un <img> absoluto no se estira entre left/right: el tamaño va explícito */
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%; border-radius: 0;
  -webkit-mask: var(--chevron-left) 0 0 / 100% 100% no-repeat;
  mask: var(--chevron-left) 0 0 / 100% 100% no-repeat;
}

/* ------------------------------ Destinatarios ------------------------------ */
.svc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.svc-card {
  display: flex; flex-direction: column; gap: 16px;
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--slate-200); border-radius: 16px;
  box-shadow: 0 4px 8px rgba(30, 41, 59, .02);
}
.svc-card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: #f0f5ff; color: var(--blue-600); font-size: 20px;
}
.svc-card h3 { font-size: 20px; font-weight: 700; line-height: 24px; color: var(--heading-3); }
.svc-card p { font-size: 14px; line-height: 20px; color: var(--slate-500); }

/* ------------------------------ Tabla de coberturas ------------------------------ */
/* position: relative hace que el recorte alcance también a los textos .sr-only (position: absolute) de las
   celdas: sin eso escapan del overflow y estiran la página entera en celular. overscroll-behavior: al llegar al
   final del scroll de la tabla, el gesto no sigue moviendo la página. */
.svc-table-wrap {
  position: relative;
  overflow-x: auto; overscroll-behavior-x: contain;
  background: var(--white);
  border: 1px solid var(--slate-200); border-radius: 12px;
}
.svc-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.svc-table thead th {
  padding: 20px; background: var(--navy-900); color: var(--white);
  font-size: 16px; font-weight: 700; text-align: center;
}
.svc-table thead th:first-child { text-align: left; }
.svc-table thead th:not(:first-child), .svc-table td { width: 220px; }
.svc-table tbody th {
  padding: 16px; text-align: left;
  font-size: 14px; font-weight: 500; line-height: 18px; color: var(--navy-900);
}
.svc-table td { padding: 16px; text-align: center; font-size: 14px; line-height: 18px; }
.svc-table tbody tr { border-bottom: 1px solid var(--slate-200); }
.svc-table tbody tr:last-child { border-bottom: 0; }
.svc-table tbody tr:nth-child(odd) { background: var(--slate-50); }
.tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(16, 185, 129, .14); color: #047857; font-size: 12px;
}
.tick .icon { stroke-width: 3; }
.dash { color: var(--slate-400); }
.cell-text { color: var(--blue-600); font-weight: 600; }
.svc-table-wrap:focus-visible { outline-offset: -3px; }

/* ------------------------------ Preguntas frecuentes ------------------------------ */
.svc-faqs { display: grid; gap: 16px; }
/* El relleno va en el <summary> y no en la tarjeta: así se puede tocar toda la tarjeta para abrirla (área de 44 px+) */
.svc-faq {
  padding: 0;
  background: var(--white);
  border: 1px solid var(--slate-200); border-radius: 12px;
}
.svc-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 24px; padding: 24px; list-style: none; cursor: pointer;
  font-size: 16px; font-weight: 700; line-height: 20px; color: var(--navy-900);
}
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary .icon { font-size: 20px; color: var(--blue-600); transition: transform .22s var(--ease); }
.svc-faq[open] summary .icon { transform: rotate(180deg); }   /* cerrado: chevron hacia abajo · abierto: hacia arriba */
.svc-section--white .svc-faq { background: var(--slate-50); }
.svc-faq[open] summary { padding-bottom: 12px; }
.svc-faq p { padding: 0 24px 24px; font-size: 14px; line-height: 20px; color: var(--slate-500); }

/* ------------------------------ Cotizá ------------------------------ */
.svc-quote-inner { display: flex; align-items: flex-start; gap: 64px; }
.svc-quote-copy {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
}
.svc-quote-copy > p { font-size: 16px; line-height: 24px; color: var(--slate-500); }
.svc-trust { display: flex; align-items: center; gap: 12px; }
.svc-trust-icon {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 10px;
  background: #e6f4ea; color: var(--green); font-size: 20px;
}
.svc-trust p { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--navy-900); }

.svc-form {
  display: flex; flex-direction: column; gap: 20px;
  flex: none; width: 540px; max-width: 100%;
  padding: 40px;
  background: var(--white);
  border: 1px solid var(--slate-200); border-radius: 16px;
  box-shadow: 0 12px 12px rgba(30, 41, 59, .02);
}
.svc-form-title { font-size: 20px; font-weight: 800; color: var(--heading-3); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.form-group { display: contents; }   /* el agrupado es solo para armar el mensaje de WhatsApp */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field--full { grid-column: 1 / -1; }
.field label, .field-label { padding: 0; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--slate-500); }
.req { color: #dc2626; }
legend.field-label { margin-bottom: 8px; }   /* el <legend> no recibe el gap del fieldset */

.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea {
  width: 100%; min-height: 43px; padding: 12px;
  font: inherit; font-size: 14px; line-height: 18px;
  color: var(--navy-900);
  background: var(--slate-50);
  border: 1px solid var(--slate-200); border-radius: 8px;
}
.field textarea { min-height: 80px; resize: vertical; }
/* Placeholder claro y regular (400), para que no se confunda con un valor ya cargado.
   --placeholder es slate-400 al 70 %: el mismo criterio para inputs, selects sin elegir y fechas vacías. */
.svc-form { --placeholder: rgba(148, 163, 184, .7); }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); opacity: 1; font-weight: 400; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid rgba(59, 130, 246, .35); outline-offset: 0; border-radius: 8px;
  border-color: var(--blue-600); background: var(--white);
}
.field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.select-wrap { position: relative; display: block; }
.field select { padding-right: 36px; font-weight: 500; appearance: none; -webkit-appearance: none; cursor: pointer; }
.field select:required:invalid { color: var(--placeholder); font-weight: 400; }
.field select:has(option[value=""]:checked) { color: var(--placeholder); font-weight: 400; }
.field select option { color: var(--navy-900); font-weight: 400; }   /* la lista desplegada no hereda el tono del placeholder */
.field input[type="date"]:required:invalid { color: var(--placeholder); font-weight: 400; }   /* "dd/mm/aaaa" vacío */
.select-wrap .icon {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  font-size: 14px; color: var(--slate-500); pointer-events: none;
}

/* Sí / No y similares: botones segmentados (el radio real queda encima, invisible) */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-opt, .chip { position: relative; }
.seg-opt { flex: 1 1 0; min-width: 72px; }
.seg-opt input, .chip input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.seg-opt span, .chip span {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--slate-200);
  background: var(--slate-50); color: var(--slate-500);
  font-size: 14px; font-weight: 500; line-height: 18px; text-align: center;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.seg-opt span { min-height: 44px; padding: 12px; border-radius: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip span { padding: 8px 16px; border-radius: 999px; font-size: 12px; }
.seg-opt input:checked + span, .chip input:checked + span {
  background: #f0f5ff; border-color: var(--blue-600); color: var(--blue-600); font-weight: 600;
}
.seg-opt input:focus-visible + span, .chip input:focus-visible + span {
  outline: 3px solid rgba(59, 130, 246, .5); outline-offset: 1px;
}

.svc-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 16px;
  border: 0; border-radius: 10px;
  background: var(--green); color: var(--white);
  font: inherit; font-size: 16px; font-weight: 600; line-height: 20px;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background-color .18s var(--ease), box-shadow .2s var(--ease), transform .12s var(--ease);
}
.svc-submit:hover { background: #059669; box-shadow: var(--shadow-btn-hover); }
.svc-submit:active { transform: scale(.99); }
.svc-submit .icon { font-size: 18px; }
.form-status {
  margin: 0; padding: 12px 16px; border-radius: 8px;
  background: #ecfdf5; color: #065f46; font-size: 14px; line-height: 20px;
}
.form-status a { font-weight: 600; text-decoration: underline; }
.form-legal { margin: 0; font-size: 12px; line-height: 16px; text-align: center; color: var(--slate-500); }

/* ------------------------------ Alianzas (alianzas.html) ------------------------------ */
.ali-icon {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 12px;
  background: #f0f5ff; color: var(--blue-600); font-size: 24px;
}
.ali-icon--lg { width: 56px; height: 56px; border-radius: 14px; font-size: 28px; }

/* Cómo funciona */
.ali-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ali-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ali-steps--4 .ali-step { padding: 28px; }
.ali-step {
  display: flex; flex-direction: column; gap: 8px;
  padding: 32px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200); border-radius: 12px;
}
.ali-step-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ali-step-num { font-size: 32px; font-weight: 800; line-height: 32px; color: rgba(37, 99, 235, .2); }
.ali-step h3 { font-size: 20px; font-weight: 700; line-height: 24px; color: var(--heading-3); }
.ali-step p { font-size: 14px; line-height: 20px; color: var(--slate-500); }

/* Beneficios */
.ali-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ali-benefit {
  display: flex; align-items: center; gap: 24px;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--slate-200); border-radius: 16px;
}
.ali-benefit h3 { margin-bottom: 8px; font-size: 18px; font-weight: 700; line-height: 22px; color: var(--heading-3); }
.ali-benefit p { font-size: 14px; line-height: 20px; color: var(--slate-500); }

/* A quién está orientado */
.ali-profiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.ali-profile {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 24px 16px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200); border-radius: 12px;
}
.ali-profile-name { font-size: 14px; font-weight: 700; line-height: 18px; text-align: center; color: var(--navy-900); }

/* Testimonios: usa las tarjetas de la home (.testimonial-card) en 2 columnas */
.ali-reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ali-reviews .testimonial-card { padding: 32px; }
.ali-reviews .testimonial-role b { font-weight: 600; color: var(--blue-600); }

/* Formulario */
.ali-checks { display: grid; gap: 12px; }
.ali-checks li { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--slate-800); }
.ali-checks .icon { font-size: 16px; color: var(--green); stroke-width: 2.5; }
/* listas de textos largos (varias líneas): el tilde queda a la altura de la primera línea */
.ali-checks--top li { align-items: flex-start; }
.ali-checks--top .icon { margin-top: 2px; }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 1279px) {
  .ali-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .svc-h2, .svc-h2--lg { font-size: 30px; }
  .svc-head { margin-bottom: 36px; }

  .svc-desc, .svc-quote-inner { flex-direction: column; align-items: stretch; gap: 40px; }
  .svc-desc-img, .svc-desc-visual { order: -1; width: 100%; height: auto; aspect-ratio: 500 / 360; }
  /* Una columna: la foto va arriba, dentro de los márgenes de la página (sin bleed: en vertical parecía un corte
     de pantalla), con las esquinas de arriba redondeadas y el chevrón hacia abajo */
  .svc-section--bleed .svc-desc { min-height: 0; }
  .svc-section--bleed .svc-desc-copy { width: auto; }
  .svc-section--bleed .svc-desc-img, .svc-section--bleed .svc-desc-visual {
    position: static; width: 100%; border-radius: 16px;
    aspect-ratio: 16 / 10; max-height: 460px;
    -webkit-mask-image: var(--chevron-down); mask-image: var(--chevron-down);
  }
  .svc-cards { grid-template-columns: 1fr; gap: 16px; }
  .ali-steps, .ali-benefits, .ali-reviews { grid-template-columns: 1fr; gap: 16px; }
  .ali-profiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-form { width: 100%; }
}

@media (max-width: 767px) {
  .svc-hero { min-height: 0; padding: 112px 0 48px; }
  .svc-lead { font-size: 16px; }
  .svc-cta { width: 100%; }
  .svc-cta .btn { flex: 1 1 auto; }
  .svc-h2, .svc-h2--lg { font-size: 26px; }
  .svc-card { padding: 20px; }
  .svc-faq summary { padding: 20px; }
  .svc-faq[open] summary { padding-bottom: 12px; }
  .svc-faq p { padding: 0 20px 20px; }
  .chip span { min-height: 44px; padding: 12px 16px; }   /* opciones tildables: área táctil de 44 px */

  /* "Qué es": en celular va título, imagen y después el texto. El bloque de texto se "abre"
     (display: contents) para poder intercalar la imagen entre el título y los párrafos. */
  .svc-desc { gap: 24px; }
  .svc-desc-copy { display: contents; }
  .svc-desc-copy > h2 { order: 1; }
  .svc-desc-img, .svc-desc-visual { order: 2; }
  .svc-desc-copy > p { order: 3; }
  /* Con bleed la foto va primero y el texto sigue como un solo bloque (sin display: contents): así título, párrafos,
     listas y notas conservan su orden natural, tengan los elementos que tengan (antes una lista quedaba arriba del título) */
  .svc-section--bleed .svc-desc-copy { display: flex; }
  .svc-section--bleed .svc-desc-copy > * { order: 0; }   /* anula el orden intercalado de arriba */
  .svc-section--bleed .svc-desc-img, .svc-section--bleed .svc-desc-visual { order: -1; }

  .ali-step { padding: 20px; }
  .ali-step-head { margin-bottom: 8px; }
  .ali-benefit { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .ali-profiles { grid-template-columns: 1fr; gap: 12px; }
  .ali-profile { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 16px; }
  .ali-profile-name { text-align: left; }
  .ali-reviews .testimonial-card { padding: 20px; }
  .svc-form { padding: 24px 20px; }
  .form-grid { grid-template-columns: 1fr; gap: 16px; }
  .svc-table thead th, .svc-table tbody th, .svc-table td { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-faq summary .icon, .svc-submit { transition: none; }
}

/* ==========================================================================
   Escala tipográfica de las subpáginas (misma lógica que styles.css: valores pares, base 14 en celular,
   ayudas en 12 y campos de formulario en 16 para que el iPhone no haga zoom al tocarlos)
   ========================================================================== */
@media (max-width: 1023px) {
  .svc-hero h1 { font-size: 40px; line-height: 44px; }
}
@media (max-width: 767px) {
  .svc-hero h1 { font-size: 28px; line-height: 32px; }                                   /* hero */
  /* Títulos de sección a la izquierda, como en la home (ver la regla de alineación en styles.css) */
  .svc-head { align-items: flex-start; text-align: left; }
  /* Celular: hero centrado y velo parejo, porque el texto ya no va de un lado */
  .svc-hero-inner { align-items: center; max-width: none; text-align: center; }
  .svc-cta { justify-content: center; }
  .svc-hero::after {
    background: var(--hero-top-shade),
      radial-gradient(70% 90% at 50% 55%, color-mix(in srgb, var(--footer) 45%, transparent) 0, transparent 100%),
      color-mix(in srgb, var(--footer) 55%, transparent);
  }
  .svc-lead { font-size: 16px; line-height: 24px; }
  .svc-h2, .svc-h2--lg { font-size: 24px; line-height: 32px; }                           /* título de sección */
  .svc-form-title { font-size: 18px; line-height: 24px; }
  .svc-card h3, .ali-step h3, .ali-benefit h3 { font-size: 18px; line-height: 24px; }    /* título de tarjeta */
  .ali-step-num { font-size: 24px; line-height: 24px; }
  .svc-faq summary { font-size: 16px; line-height: 22px; }
  .svc-desc-copy p, .svc-quote-copy > p { font-size: 14px; line-height: 22px; }           /* párrafo */
  .svc-card p, .svc-faq p, .ali-step p, .ali-benefit p, .svc-trust p, .ali-checks li,
  .svc-table thead th { font-size: 14px; line-height: 20px; }
  .field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea { font-size: 16px; line-height: 20px; }
  .svc-submit { font-size: 14px; }
}

/* 404 */
.svc-404 { display: flex; align-items: center; min-height: 70vh; padding-top: 160px; }
.svc-404 .gestoria-kicker { color: var(--eyebrow); }   /* sobre blanco: el gris de los antetítulos (el celeste es solo para la tarjeta navy) */
.svc-404-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 640px; }
.svc-404-inner > p:not(.gestoria-kicker) { font-size: 16px; line-height: 24px; color: var(--slate-500); }