/* ==========================================================================
   RESOL.CAT — Hoja de estilos
   Design tokens extraídos del flyer corporativo (flyer_RESOLCAT.jpg)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Color — muestreado directamente del flyer */
  --c-blue: #3484a7;
  --c-blue-dark: #2b6d8b;
  --c-teal: #329a8f;
  --c-green: #349021;
  --c-ink: #1f3a45;

  --c-text: #3f4a4f;
  --c-text-soft: #5f6a6e;
  --c-text-invert: #ffffff;
  --c-text-invert-soft: #c3d2d8;

  --c-surface: #ffffff;
  --c-surface-alt: #f4f7f8;
  --c-backdrop: #e8edef;
  --c-rule: #d5dde0;

  /* Tipografía
     El flyer está compuesto en DejaVu Sans (cuerpo) y una condensada para el
     titular. Verdana actúa de sustituto métricamente cercano en macOS/Windows;
     Roboto Condensed cubre el titular allí donde no exista DejaVu Condensed. */
  --font-base: "DejaVu Sans", Verdana, Geneva, Tahoma, sans-serif;
  --font-display: "DejaVu Sans Condensed", "Roboto Condensed", "Arial Narrow",
    var(--font-base);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.0625rem, 0.9rem + 0.7vw, 1.3125rem);
  --text-xl: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.2rem + 2.4vw, 2.25rem);
  --text-3xl: clamp(2.125rem, 1.35rem + 3.4vw, 3.125rem);

  --leading-tight: 1.12;
  --leading-snug: 1.32;
  --leading-normal: 1.55;

  /* Espaciado — escala base 4 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;
  --space-9: 4.5rem;

  /* Layout */
  --sheet-max: 62rem; /* 992px — proporción de hoja del flyer */
  --sheet-pad: clamp(1.5rem, 5vw, 4rem);

  /* Radios y sombras */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sheet: 0 1px 2px rgba(31, 58, 69, 0.06),
    0 18px 48px -18px rgba(31, 58, 69, 0.22);
  --shadow-card: 0 8px 24px -12px rgba(31, 58, 69, 0.35);

  /* Motion */
  --duration-fast: 140ms;
  --duration-base: 260ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-backdrop);
  color: var(--c-text);
  font-family: var(--font-base);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--c-blue-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--c-ink);
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-ink);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  z-index: 10;
}

.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
  color: #fff;
}

/* --------------------------------------------------------------------------
   3. HOJA / CONTENEDOR
   -------------------------------------------------------------------------- */
.sheet {
  max-width: var(--sheet-max);
  margin: clamp(0rem, 3vw, 2.5rem) auto;
  background: var(--c-surface);
  box-shadow: var(--shadow-sheet);
  overflow: hidden;
}

/* Barra tricolor superior */
.brandbar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 10px;
}

.brandbar span:nth-child(1) {
  background: var(--c-blue);
}
.brandbar span:nth-child(2) {
  background: var(--c-teal);
}
.brandbar span:nth-child(3) {
  background: var(--c-green);
}

.sheet__body {
  padding: clamp(1.75rem, 4vw, 3rem) var(--sheet-pad) var(--space-9);
}

/* --------------------------------------------------------------------------
   4. CABECERA / LOGO
   -------------------------------------------------------------------------- */
.masthead {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
}

.masthead__mark {
  width: clamp(72px, 11vw, 104px);
  flex: none;
}

.masthead__eyebrow {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.055em;
  color: var(--c-blue);
  text-transform: uppercase;
  line-height: 1.3;
}

.masthead__name {
  font-size: clamp(1.75rem, 1.1rem + 2.8vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.045em;
  color: var(--c-ink);
  line-height: 1.05;
  margin: 0.12em 0 0.14em;
}

.masthead__tagline {
  font-size: var(--text-sm);
  color: var(--c-text-soft);
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   5. TITULAR
   -------------------------------------------------------------------------- */
.hero {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.005em;
  color: var(--c-blue);
  text-wrap: balance;
}

.hero__title span {
  display: block;
}

.hero__claim {
  margin-top: var(--space-4);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--c-teal);
  text-wrap: balance;
}

.rule {
  border: 0;
  border-top: 1px solid var(--c-rule);
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2rem);
}

.lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--c-text);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   6. SECCIONES
   -------------------------------------------------------------------------- */
.section {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}

.section__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--c-blue);
  line-height: 1.2;
}

.section__title::after {
  content: "";
  display: block;
  width: 5.25rem;
  height: 4px;
  margin-top: var(--space-2);
  background: var(--c-green);
}

/* --- Servicios --- */
.services {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
}

.service {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  align-items: start;
}

.service__chip {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--radius-sm);
  margin-top: 0.28em;
  background: var(--c-blue);
}

.service--teal .service__chip {
  background: var(--c-teal);
}
.service--green .service__chip {
  background: var(--c-green);
}

.service__name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.3;
}

.service__text {
  grid-column: 2;
  color: var(--c-text-soft);
  line-height: 1.45;
  max-width: 60ch;
}

/* --- Per a qui --- */
.audience {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  align-items: start;
}

@media (min-width: 34em) {
  .audience {
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
  }
}

.audience__label {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--c-blue);
  line-height: 1.35;
  white-space: nowrap;
}

.audience__text {
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.45;
  max-width: 58ch;
}

/* --- Caja destacada --- */
.callout {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  background: var(--c-blue);
  border-left: 10px solid var(--c-green);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.5rem, 4vw, 2.5rem);
  color: var(--c-text-invert);
  box-shadow: var(--shadow-card);
}

.callout__title {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #dbeaf1;
  margin-bottom: var(--space-3);
}

.callout__text {
  line-height: 1.5;
  max-width: 64ch;
}

/* --------------------------------------------------------------------------
   7. FORMULARIO (hueco para el embed de Brevo)
   -------------------------------------------------------------------------- */
.signup {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--c-surface-alt);
  border: 1px solid var(--c-rule);
  border-top: 4px solid var(--c-teal);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* A partir de tablet el bloque se reparte en dos columnas: el texto a la
   izquierda y el formulario a la derecha. Así ocupa todo el ancho de la caja
   sin estirar las líneas de texto ni el campo de correo, que a 860 px se
   pasarían de largo (~100 caracteres por línea). */
@media (min-width: 52em) {
  .signup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: start;
  }
}

.signup__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.25;
}

.signup__text {
  margin-top: var(--space-3);
  color: var(--c-text-soft);
  max-width: 56ch;
}

.signup__slot {
  margin-top: var(--space-5);
}

/* En dos columnas el formulario ya empieza arriba: no necesita el margen. */
@media (min-width: 52em) {
  .signup__slot {
    margin-top: 0;
  }
}

.signup__legal {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--c-text-soft);
  max-width: 58ch;
}

/* Brevo tiñe sus enlaces de #2BB2FC, que sobre el gris del bloque no llega a
   contraste AA. Se recuperan los colores de la web. */
.signup__slot .sib-form a,
.signup__legal a {
  color: var(--c-blue-dark);
  text-decoration: underline;
}

.signup__slot .sib-form a:hover,
.signup__legal a:hover {
  color: var(--c-ink);
}

/* ===== Formulario de Brevo ================================================
   Brevo aporta la lógica (main.js + sib-styles.css); aquí solo se reviste con
   la identidad de RESOL.CAT. No se toca ninguna clase ni id que use su JS:
   únicamente se reescriben propiedades visuales.
   sib-styles.css se carga ANTES que este archivo, así que basta con igualar o
   subir un poco la especificidad; el !important queda para las propiedades que
   Brevo declara con reglas muy específicas.
   ========================================================================= */

/* El JS de Brevo muestra estos paneles cuando toca. Se mantiene :where() para
   dejar la especificidad a cero, igual que en el snippet original. */
:where(.sib-form-message-panel) {
  display: none;
}

:where(.sib-form-message-panel .sib-notification__icon) {
  width: 20px;
  height: 20px;
}

.signup__slot .sib-form {
  padding: 0;
  background: transparent;
  text-align: left;
}

.signup__slot .sib-form-container,
.signup__slot #sib-container {
  background: transparent;
  border: 0;
  padding: 0;
  max-width: none;
  text-align: left;
}

/* Ritmo vertical del formulario: lo marca el grid, no los paddings de Brevo */
.signup__slot #sib-form {
  display: grid;
  gap: var(--space-5);
  max-width: 32rem;
}

.signup__slot .sib-form-block,
.signup__slot .form__entry {
  padding: 0;
  margin: 0;
}

/* --- Etiquetas --- */
.signup__slot .entry__label:not(.entry__label_optin) {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--c-ink);
  text-align: left;
}

/* El asterisco solo en las etiquetas de campo. En la casilla de aceptación
   quedaba huérfano en una segunda línea, y allí la obligatoriedad ya la
   comunica el mensaje de error de Brevo al intentar enviar. */
.signup__slot .entry__label:not(.entry__label_optin)[data-required]::after {
  content: " *";
  color: var(--c-teal);
}

/* --- Casilla de aceptación (campo OPT_IN) ---
   Brevo oculta el <input> real (.input_replaced, opacity:0) y dibuja la marca
   con el ::before del <span class="checkbox">. Aquí solo se recolorea ese
   mecanismo; no se toca la estructura ni se muestra el input, porque entonces
   se verían dos casillas. */
.signup__slot .sib-optin .entry__choice {
  font-family: var(--font-base);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--c-text-soft);
  margin: 0;
  /* Algo más estrecho que el formulario: así el asterisco de obligatorio
     acompaña al texto en vez de caer solo en una línea propia. */
  max-width: 26rem;
}

.signup__slot .sib-optin .entry__choice label {
  cursor: pointer;
}

.signup__slot .sib-form .checkbox {
  width: 1.05em;
  height: 1.05em;
  border: 1px solid #9fb0b7;
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  transition: background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

/* Marcada: verde agua de la marca en lugar del verde de Brevo (#13ce66) */
.signup__slot .sib-form .input_replaced:checked + .checkbox_tick_positive {
  background: var(--c-teal);
  border-color: var(--c-teal);
}

/* Foco visible: el input real no se ve, así que el anillo lo lleva la casilla */
.signup__slot .sib-form .input_replaced:focus + .checkbox,
.signup__slot .sib-form .input_replaced:active + .checkbox {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(52, 132, 167, 0.25);
}

/* Brevo dibuja el asterisco de obligatorio con content:attr(data-required) en
   rojo #ff4949. Se conserva el mecanismo y solo se recolorea. */
.signup__slot .entry__label_optin {
  display: inline;
  margin: 0;
  width: auto;
}

.signup__slot .entry__label_optin::after {
  color: var(--c-teal);
  font-weight: 700;
}

/* --- Campos --- */
.signup__slot .entry__field {
  border: 1px solid #c2ced3;
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  box-shadow: none;
  transition: border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.signup__slot .entry__field:hover {
  border-color: #9fb0b7;
}

.signup__slot .entry__field:focus-within {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(52, 132, 167, 0.18);
}

.signup__slot .sib-form input,
.signup__slot .sib-form textarea {
  font-family: var(--font-base);
  font-size: var(--text-base);
  color: var(--c-ink);
  padding: 0.7rem 0.85rem;
  background: transparent;
}

.signup__slot .sib-form input::placeholder,
.signup__slot .sib-form textarea::placeholder {
  font-family: var(--font-base);
  color: #90a0a7;
  opacity: 1;
}

/* Marca de campo con error que pinta el JS de Brevo */
.signup__slot .entry__field.entry__field--error,
.signup__slot .sib-form .entry_block .entry__field--error {
  border-color: #c0392b;
}

/* --- Texto de ayuda y de error --- */
.signup__slot .entry__specification {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-base);
  font-size: var(--text-xs);
  color: var(--c-text-soft);
  text-align: left;
}

.signup__slot .entry__error {
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: #7d1f1f;
  background-color: #fdecec;
  border-color: #c0392b;
  border-radius: var(--radius-sm);
  text-align: left;
}

/* --- Paneles de aviso (error / éxito) --- */
.signup__slot .sib-form-message-panel {
  font-family: var(--font-base);
  font-size: var(--text-base);
  border-radius: var(--radius-sm);
  max-width: 32rem;
  margin-bottom: var(--space-5);
  text-align: left;
}

.signup__slot #error-message {
  color: #7d1f1f;
  background-color: #fdecec;
  border-color: #c0392b;
}

.signup__slot #success-message {
  color: #16564d;
  background-color: #e7f6f3;
  border-color: var(--c-teal);
}

/* --- Botón --- */
.signup__slot .sib-form-block__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background-color: var(--c-blue);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.6rem;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.signup__slot .sib-form-block__button:hover {
  background-color: var(--c-blue-dark);
}

.signup__slot .sib-form-block__button:active {
  transform: translateY(1px);
}

/* --- Captcha: que no desborde en móvil --- */
.signup__slot .sib-captcha {
  overflow-x: auto;
}

/* Si algún día se sustituye por el embed en iframe de Brevo */
.signup__slot iframe {
  width: 100%;
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------------
   8. PIE
   -------------------------------------------------------------------------- */
.footer {
  background: var(--c-ink);
  border-top: 8px solid var(--c-green);
  color: var(--c-text-invert);
  padding: clamp(1.75rem, 4vw, 2.5rem) var(--sheet-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
}

@media (min-width: 48em) {
  .footer {
    grid-template-columns: 1fr auto;
  }
}

.footer__title {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.footer__contact {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  color: var(--c-text-invert);
  line-height: 1.6;
}

.footer__contact a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.footer__contact a:hover {
  color: #ffffff;
  border-bottom-color: var(--c-green);
}

.footer__sep {
  color: var(--c-text-invert-soft);
  padding: 0 var(--space-2);
}

.footer__address {
  margin-top: var(--space-3);
  color: var(--c-text-invert-soft);
  line-height: 1.5;
}

.footer__address span {
  display: block;
}

.footer__qr {
  justify-self: start;
  text-align: center;
}

@media (min-width: 48em) {
  .footer__qr {
    justify-self: end;
  }
}

/* Ancho generoso: el QR tiene 57 módulos, necesita ~2,5 px por módulo
   para que las cámaras lo lean sin esfuerzo. */
.footer__qr img {
  width: clamp(148px, 20vw, 172px);
  background: #fff;
  border-radius: var(--radius-md);
  padding: 10px;
  image-rendering: pixelated;
}

.footer__qr figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--c-text-invert-soft);
}

.legal {
  max-width: var(--sheet-max);
  margin: var(--space-5) auto clamp(1.5rem, 4vw, 3rem);
  padding: 0 var(--sheet-pad);
  font-size: var(--text-xs);
  color: var(--c-text-soft);
  text-align: center;
}

.legal__links {
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
}

.legal__links a {
  color: var(--c-text-soft);
  text-decoration: underline;
}

.legal__links a:hover {
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   9. MICROINTERACCIONES
   -------------------------------------------------------------------------- */
/* Solo se ocultan si hay JS: sin JS el contenido se ve siempre. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   10. IMPRESIÓN — recupera el aspecto de flyer A4
   -------------------------------------------------------------------------- */
@media print {
  body {
    background: #fff;
  }

  .sheet {
    box-shadow: none;
    margin: 0;
    max-width: none;
  }

  .signup,
  .legal,
  .skip-link {
    display: none !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}