/* after15.css: what follows the film (Precios · FAQ · Contacto · footer · floating WhatsApp), used by prototype 15.
   Mobile first. Everything is namespaced .a9-* so it never collides with the film's own classes (.btn, .chip, .h…).
   Colour: each section sits on its own soft colour field (peach → apricot, sky → lavender, mint → sky, then a deeper
   lilac for the footer: light and bright, never the dark "AI" blue), and the fields melt into each other over long
   gradients. No tiles, no squares, no shapes anywhere: every small mark is round. Little pink: pink→orange is kept for
   one card only, the recommended Profesional plan.
   Contrast: every text colour below was checked at 4.5:1 or more on its background (headings in gradient: 3:1+, large text).
   Open/close movement (the FAQ answers) is done by after15.js with the Web Animations API, so it looks the same in Chrome
   and Safari; nothing here transitions a height.
   Every visitor gets the same movement (there is no reduced-motion version). */

.a9, .a9-wa {
  --a9-ink: #1A1424;
  --a9-ink2: #3E3449;      /* answers, body copy on white: 11.7:1 */
  --a9-muted: #5E5468;     /* leads: 5.8:1+ on every wash */
  --a9-faint: #6B5F77;     /* small print: 4.9:1+ on every wash, 5.9:1 on white */
  --a9-base: #FFFBF5;      /* the page between the washes: the same very light cream the film ends on, not sand */
  --a9-focus: #5B3CF0;
  --a9-fd: var(--f-d, "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif);
  --a9-fb: var(--f-b, "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif);
  --a9-gut: clamp(16px, 5vw, 64px);
  --a9-pad: clamp(56px, 9vw, 112px); /* a section's space above and below its words (the footer starts this far under Contacto) */
  --a9-e: cubic-bezier(.2, .7, .2, 1);
  --a9-spring: cubic-bezier(.34, 1.5, .6, 1);
  /* the colour the film ends on: the block starts in exactly this colour, so there is no seam.
     The page sets it with :root { --a9-film-end: … } when its last frame is not this warm white. */
  --a9-from: var(--a9-film-end, #FFFBF5);
  /* deep accents for small text (4.5:1+ on the fields) and their bright partners */
  --a9-coral: #B93A1F;  --a9-coral-b: #FF6B4A;
  --a9-amber: #A85400;  --a9-amber-b: #FFB020;
  --a9-teal: #0B7D66;   --a9-teal-b: #3BCEAC;
  --a9-blue: #2F4BD8;   --a9-blue-b: #4361EE;
  --a9-violet: #6A2BD9; --a9-violet-b: #9B5DE5;
  /* card gradients */
  --a9-g-mint: linear-gradient(150deg, #5BE3B9 0%, #6FCBFF 100%);
  --a9-g-sky: linear-gradient(150deg, #7CC6FF 0%, #B49CFF 100%);
  --a9-g-sun: linear-gradient(150deg, #FF3D7F 0%, #FF9F1C 100%);               /* Profesional only */
  --a9-g-indigo: linear-gradient(155deg, #7B2FF7 0%, #5B3CF0 48%, #3A5BEA 100%); /* white text 5.4:1+ */
  --a9-g-coral: linear-gradient(135deg, #FF6B4A 0%, #FFB020 100%);
  --a9-g-gold: linear-gradient(135deg, #FFD23F 0%, #FF9F1C 100%);
  --a9-g-cool: linear-gradient(135deg, #B49CFF 0%, #7B8CFF 100%);
  --a9-g-teal: linear-gradient(135deg, #5BE49B 0%, #3BCEAC 55%, #4CC9F0 100%);
  --a9-g-tg: linear-gradient(135deg, #8BE3FF 0%, #52BBF7 55%, #4F9CF2 100%); /* Telegram's own azure, softened like the others */
  /* rainbow lettering: the full spectrum, deepened just enough for big type on the light page (3:1+ at every stop) */
  --a9-rainbow-text: linear-gradient(90deg, #E0362C 0%, #E05A00 18%, #B87800 30%, #159A5B 42%, #0790A6 58%, #3456E8 78%, #7B2FF7 100%);
  /* the footer's big wordmark: strong, saturated colour only (no pale yellow, light green or light blue, and no hot pink:
     orange turns to violet through a short deep magenta, not a pink stop) */
  --a9-word: linear-gradient(90deg, #E8262E 0%, #F2611A 25%, #B82F9C 52%, #7434D6 74%, #2E49E0 100%);
  /* the wordmark's dot (the logo, the big GPT.UNO): the knot's colours round a circle, in the logo's order, as in the header */
  --a9-logo-dot: conic-gradient(from 210deg, #E8262E, #F2611A, #F5A300, #18A047, #0E9C8A, #1387C8, #2E49E0, #7434D6, #D41A72, #E8262E);
  /* the colour fields, top to bottom. Each section's field starts in exactly the colour the one above ends in. */
  --a9-f-peach: #FFE4D1;
  --a9-f-apricot: #FFD7AE;
  --a9-f-butter: #FFF0C9;   /* (apricot → butter → mint → sky: the warm field cools through the spectrum, never through grey) */
  --a9-f-mist: #E4F5E8;     /* where Precios hands over to the FAQ */
  --a9-f-sky: #DAEAFF;
  --a9-f-lav: #E5DDFF;
  --a9-f-ice: #DDF0FA;      /* where the FAQ hands over to Contacto */
  --a9-f-mint: #D3F5E7;
  --a9-f-sky2: #D2E6FF;
  --a9-f-peri: #C3CDFB;     /* where Contacto hands over to the footer */
  --a9-f-lilac: #D6CCFF;    /* the footer's own field: a soft lilac, a shade deeper than the fields above */
  --a9-f-dawn: #EFE9FF;     /* and it lightens a little under the wordmark */
  --a9-check-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1424' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --a9-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.a9-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The block starts in the film's last colour (--a9-from), so the seam under the film is invisible; from there each section
   paints its own colour field (below). The block itself is plain: one colour, nothing to repaint when the page moves.
   (A page that pulls the block up over the bottom of its film's last frame sets --a9-fade, a length, and --a9-top, the
   film's colour made clear: the block's top that long fades from see-through into its colour, so it never draws an edge
   over the film. Without them the block is solid from its first pixel.) */
.a9 {
  position: relative;
  z-index: 1;
  color: var(--a9-ink);
  font: 400 17px/1.55 var(--a9-fb);
  overflow-x: clip;
  background: linear-gradient(180deg, var(--a9-top, var(--a9-from)) 0, var(--a9-from) var(--a9-fade, 0px));
}
.a9 *, .a9 *::before, .a9 *::after, .a9-wa, .a9-wa * { box-sizing: border-box; }
:where(.a9) :is(p, h2, h3, ul) { margin: 0; }
:where(.a9) a { color: inherit; }
.a9 [hidden] { display: none !important; }
/* keyboard focus: the same quiet ink ring everywhere (the FAQ cards, links, buttons; white on the indigo card); a mouse
   click or a tap leaves no ring */
.a9 :focus-visible, .a9-wa:focus-visible { outline: 2px solid var(--a9-ring, rgba(26, 20, 36, .55)); outline-offset: 3px; }
.a9-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:where(.a9) svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* earlier after-film styles on a page may use #precios selectors; these stop them leaking in */
#precios.a9-sec .a9-h2 { color: var(--a9-ink); }
#precios.a9-sec .a9-h2 em { color: transparent; }
#precios.a9-sec .a9-eyebrow { color: var(--a9-acc); }
#precios.a9-sec .a9-lead { color: var(--a9-muted); }

.a9-wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--a9-gut); }

/* ---------- sections and their colour fields ----------
   Each section is one vertical gradient: it starts in the colour the section above ends in, settles into its own field,
   and in its last few hundred pixels starts turning into the next one (which finishes the turn in its own first pixels).
   So the hand-overs are long and even, with no edge. One gradient layer per section, nothing else: cheap to repaint when
   a FAQ answer opens and everything below moves. */
.a9-sec { position: relative; isolation: isolate; padding: var(--a9-pad) 0; scroll-margin-top: 64px; --a9-acc: var(--a9-coral); --a9-acc-b: var(--a9-coral-b); }
/* (the gap under the film's buttons: on a phone the same as before, when a row of tiles filled it; on a wide screen the film's
   last frame already leaves a tall band of cream under its buttons, so Precios starts closer) */
.a9-prices {
  padding-top: calc(clamp(48px, 7.5vh, 68px) + 4px);
  background: linear-gradient(180deg, var(--a9-top, var(--a9-from)) 0, var(--a9-from) max(40px, var(--a9-fade, 0px)), var(--a9-f-peach) calc(420px + var(--a9-fade, 0px) / 2), var(--a9-f-apricot) calc(100% - 520px), var(--a9-f-butter) calc(100% - 200px), var(--a9-f-mist) 100%);
}
@media (min-width: 720px) { .a9-prices { padding-top: clamp(40px, 5vh, 64px); } }
/* the film's grain (kit.js sets --grain) carries on across the seam, then fades: no change of texture where they meet.
   (z-index -1 inside the section: over its colour field, under its words) */
.a9-prices::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: var(--a9-fade, 0px); height: clamp(220px, 36vh, 380px); pointer-events: none;
  background-image: var(--grain, none); background-size: 160px; opacity: .06;
  -webkit-mask-image: linear-gradient(#000 0%, #000 35%, transparent 100%); mask-image: linear-gradient(#000 0%, #000 35%, transparent 100%);
}
.a9-faq {
  --a9-acc: var(--a9-teal); --a9-acc-b: var(--a9-teal-b);
  background: linear-gradient(180deg, var(--a9-f-mist) 0, var(--a9-f-sky) 300px, var(--a9-f-lav) calc(100% - 260px), var(--a9-f-ice) 100%);
}
.a9-contact {
  --a9-acc: var(--a9-blue); --a9-acc-b: var(--a9-blue-b);
  background: linear-gradient(180deg, var(--a9-f-ice) 0, var(--a9-f-mint) 260px, var(--a9-f-sky2) calc(100% - 160px), var(--a9-f-peri) 100%);
}

.a9-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; font: 700 .78rem/1 var(--a9-fb); letter-spacing: .16em; text-transform: uppercase; color: var(--a9-acc); }
.a9-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--a9-acc-b); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a9-acc-b) 22%, transparent); }
.a9-h2 { font: 800 clamp(36px, 9.4vw, 76px)/1 var(--a9-fd); letter-spacing: -.035em; color: var(--a9-ink); max-width: 15ch; text-wrap: balance; }
.a9-h2 em, .a9-ok-h {
  font-style: normal; background: var(--a9-rainbow-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0 .05em .08em 0; margin-right: -.05em; /* no clone: one rainbow runs across the whole phrase, line after line */
}
.a9-lead { margin-top: 18px; max-width: 44ch; font: 500 clamp(1.06rem, .9rem + .5vw, 1.24rem)/1.5 var(--a9-fb); color: var(--a9-muted); text-wrap: pretty; }

/* ---------- Precios ----------
   Tablet and desktop (720 px and up): the four full cards in a grid. Phone: the same full cards in a swipe carousel (below). */
.a9-plans { position: relative; display: grid; gap: 16px; margin-top: clamp(32px, 5vw, 56px); } /* (positioned: the cards measure their offsets from it) */
/* (every row as tall as the tallest card, so in two columns too all four cards are the same height) */
@media (min-width: 720px) { .a9-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 18px; } }
@media (min-width: 1280px) { .a9-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; } }

.a9-plan {
  position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;
  display: flex; flex-direction: column;
  padding: 28px 24px 28px; border-radius: 28px; color: var(--a9-ink);
  box-shadow: 0 30px 50px -36px var(--a9-sh, rgba(40, 60, 120, .6)), inset 0 0 0 1.5px rgba(255, 255, 255, .5);
}
.a9-plan::after { /* soft gloss */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(90% 55% at 15% 0%, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 60%);
}
.a9-plan--free { background: var(--a9-g-mint); --a9-sh: rgba(20, 130, 120, .6); }
.a9-plan--ess { background: var(--a9-g-sky); --a9-sh: rgba(70, 80, 200, .6); }
.a9-plan--pro { background: var(--a9-g-sun); box-shadow: 0 36px 60px -30px rgba(255, 90, 60, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.a9-plan--custom { background: var(--a9-g-indigo); color: #fff; --a9-focus: #fff; --a9-ring: rgba(255, 255, 255, .85); --a9-sh: rgba(60, 40, 200, .7); }
.a9-plan--custom::after { background: radial-gradient(90% 55% at 15% 0%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 60%); } /* white text stays 5:1+ under the gloss */
@media (min-width: 1280px) {
  /* the recommended card rises above the row at the top only (its bottom stays on the row's line) and wears its badge as a
     tab on its top edge, so its name, price and delivery line sit on the same lines as the other three cards */
  .a9-plan--pro { overflow: visible; translate: 0 -14px; margin-bottom: -14px; padding-top: 42px; }
  .a9-plan--pro .a9-plan-name { padding-right: 0; }
  .a9-plan--pro .a9-badge { top: -13px; right: auto; left: 20px; z-index: 2; transform: rotate(-3deg); }
}

.a9-plan-name { font: 800 1.35rem/1.1 var(--a9-fd); letter-spacing: -.01em; padding-right: 7.5em; }
.a9-plan--free .a9-plan-name, .a9-plan--ess .a9-plan-name, .a9-plan--custom .a9-plan-name { padding-right: 0; }
.a9-badge {
  position: absolute; top: 24px; right: 20px;
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px 8px 10px; border-radius: 999px;
  background: #fff; color: var(--a9-ink); font: 700 .7rem/1 var(--a9-fb); letter-spacing: .1em; text-transform: uppercase;
  transform: rotate(4deg); box-shadow: 0 10px 20px -12px rgba(160, 60, 20, .6);
}
.a9-badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: conic-gradient(from 30deg, #FF5A4E, #FFB020, #3BCEAC, #4361EE, #9B5DE5, #FF5A4E); }
.a9-price { margin-top: 18px; font: 800 clamp(40px, 12vw, 56px)/1 var(--a9-fd); font-size: clamp(38px, 16cqi, 56px); letter-spacing: -.045em; font-variant-numeric: lining-nums; white-space: nowrap; }
.a9-price small { margin-right: 8px; font: 600 1rem/1 var(--a9-fb); letter-spacing: 0; }
.a9-for { margin-top: 12px; padding-bottom: 18px; border-bottom: 1.5px solid rgba(26, 20, 36, .16); font: 500 1rem/1.45 var(--a9-fb); text-wrap: balance; } /* (balance: never "el día / a día.") */
.a9-plan--custom .a9-for { border-bottom-color: rgba(255, 255, 255, .34); }
.a9-plan-list { flex: 1 0 auto; display: flex; flex-direction: column; } /* takes the card's spare height; the pill sits at its foot */
/* "Todo lo de Esencial, y además:" (Profesional, A medida): a small subtitle over the list, not a line of it */
.a9-plus { margin-top: 15px; font: 700 .8rem/1.3 var(--a9-fb); letter-spacing: .01em; }
.a9-feats { list-style: none; padding: 0; margin: 16px 0 22px; display: grid; gap: 11px; font: 500 .98rem/1.4 var(--a9-fb); }
.a9-plus + .a9-feats { margin-top: 10px; }
/* (pretty: no word left alone on a line's end, "adaptado al / móvil", so the cards' lines stay even) */
.a9-feats li { position: relative; padding-left: 31px; text-wrap: pretty; }
.a9-feats li::before { /* a round tick, not a tile */
  content: ""; position: absolute; left: 0; top: -.02em; width: 21px; height: 21px; border-radius: 50%;
  background: rgba(255, 255, 255, .66) var(--a9-check-ink) center / 12px no-repeat;
}
.a9-plan--custom .a9-feats li::before { background-color: rgba(255, 255, 255, .2); background-image: var(--a9-check-white); }
/* the delivery time closes every card: a small pill pinned to the card's bottom edge, so the cards end on one line */
.a9-when {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding: 8px 13px 8px 10px;
  border-radius: 999px; background: rgba(255, 255, 255, .58); font: 700 .9rem/1.2 var(--a9-fb); color: var(--a9-ink);
}
.a9-when svg { flex: none; width: 17px; height: 17px; stroke-width: 2.2; }
.a9-plan--custom .a9-when { background: rgba(255, 255, 255, .16); color: #fff; }

/* Phone (under 720 px): a swipe carousel. The row runs edge to edge (out of the page's side margins); each card is 84% of
   the screen, centred, with its neighbours peeking in at both edges. Scroll-snap does the swiping (the browser's own
   momentum, then it settles on the nearest card). It starts on the first card, Concepto (0 €), with Esencial peeking in
   on the right; after15.js runs the dots.
   A scroller clips on every side, so the row keeps room above (the "Recomendado" tab) and below (the cards' shadows):
   nothing is cut off. The cards stretch to the tallest one: equal heights. */
.a9-dots { display: none; }
@media (max-width: 719px) {
  .a9-plans {
    display: flex; gap: 12px; align-items: stretch;
    margin: 18px calc(-1 * var(--a9-gut)) 0; padding: 18px 8vw 34px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .a9-plans::-webkit-scrollbar { display: none; }
  .a9-plan {
    flex: 0 0 84vw; scroll-snap-align: center;
    padding: 26px 22px 24px; border-radius: 26px;
    box-shadow: 0 22px 30px -24px var(--a9-sh, rgba(40, 60, 120, .6)), inset 0 0 0 1.5px rgba(255, 255, 255, .5);
  }
  /* Profesional: the sun gradient, a brighter rim and its "Recomendado" tab on the top edge (as on a wide screen) */
  .a9-plan--pro { overflow: visible; padding-top: 34px; box-shadow: 0 22px 30px -22px rgba(255, 90, 60, .75), inset 0 0 0 2px rgba(255, 255, 255, .6); }
  .a9-plan--pro .a9-plan-name { padding-right: 0; }
  .a9-plan--pro .a9-badge { top: -12px; right: auto; left: 18px; z-index: 2; transform: rotate(-3deg); }
  .a9-price { margin-top: 14px; }
  .a9-feats { margin-bottom: 20px; }
  /* the dots under the row: round, the current card's dot drawn out into a short pill; each is a 36 × 44 px tap target */
  .a9-dots:not([hidden]) { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: -20px; margin-bottom: -6px; } /* (over the row's bottom padding, which it overlaps) */
  .a9-dot {
    display: grid; place-items: center; width: 36px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none;
  }
  .a9-dot::before {
    content: ""; width: 8px; height: 8px; border-radius: 999px; background: rgba(26, 20, 36, .24);
    transition: width .3s var(--a9-e), background-color .3s var(--a9-e);
  }
  .a9-dot[aria-current="true"]::before { width: 24px; background: var(--a9-ink); }
  .a9-dot:focus { outline: none; }
  .a9-dot:focus-visible::before { outline: 2px solid rgba(26, 20, 36, .55); outline-offset: 3px; }
}

/* the one button under the cards */
.a9-plans-go { display: flex; justify-content: center; margin-top: clamp(20px, 3.2vw, 40px); }
.a9-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 999px; border: 0;
  background: #fff; color: var(--a9-ink); font: 700 1rem/1 var(--a9-fb); text-decoration: none; cursor: pointer;
  box-shadow: 0 14px 26px -16px rgba(30, 30, 80, .55);
  transition: transform .25s var(--a9-e), box-shadow .25s var(--a9-e);
}
.a9-btn svg { width: 18px; height: 18px; stroke-width: 2.3; transition: transform .25s var(--a9-e); }
.a9-btn--go { /* the same look as the form's send button: one action, one colour */
  min-height: 58px; padding: 0 30px; color: #fff; font-size: 1.06rem; white-space: nowrap;
  background: linear-gradient(100deg, #1C6FD6 0%, #3A55E8 50%, #6A2BF0 100%); /* white text 4.9:1 at the lightest stop */
  box-shadow: 0 18px 32px -18px rgba(40, 70, 220, .85);
}
.a9-btn--line { background: transparent; box-shadow: inset 0 0 0 2px var(--a9-ink); }
@media (hover: hover) {
  .a9-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -16px rgba(30, 30, 80, .6); }
  .a9-btn--go:hover { box-shadow: 0 22px 36px -18px rgba(40, 70, 220, .9); }
  .a9-btn:hover svg { transform: translateX(3px); }
  .a9-btn--line:hover { box-shadow: inset 0 0 0 2px var(--a9-ink), 0 14px 26px -18px rgba(30, 30, 80, .45); }
}

.a9-care {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center;
  margin-top: clamp(28px, 4vw, 48px); padding: 24px 22px 22px; border-radius: 24px; background: #fff;
  box-shadow: 0 24px 44px -34px rgba(120, 70, 30, .5);
}
.a9-care-i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--a9-g-mint); color: var(--a9-ink); }
.a9-care-i svg { width: 24px; height: 24px; stroke-width: 1.9; }
.a9-care-t h3 { font: 800 1.2rem/1.2 var(--a9-fd); letter-spacing: -.01em; }
.a9-care-t p { margin-top: 4px; font: 500 .98rem/1.45 var(--a9-fb); color: var(--a9-muted); }
.a9-care-t { grid-column: 2; }
.a9-care-p { grid-column: 1 / -1; font: 800 2rem/1 var(--a9-fd); letter-spacing: -.035em; }
.a9-care-p small { margin-right: 8px; font: 600 1rem/1 var(--a9-fb); color: var(--a9-faint); }
@media (min-width: 720px) {
  .a9-care { grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; padding: 28px 32px 26px; }
  .a9-care-p { grid-column: auto; text-align: right; }
}
.a9-fine { display: grid; gap: 6px; margin-top: 22px; max-width: 74ch; font: 500 .9rem/1.5 var(--a9-fb); color: var(--a9-faint); }
/* (the English line is a little longer than the Spanish: a little more room, so on a computer and a phone held sideways it
   fits one line too (about 76ch); and on a phone the English small print and the care plan's line wrap "pretty", so they
   never end on one word alone, "yours." or "phone.") */
html[lang="en"] .a9-fine { max-width: 80ch; }
.a9-fine p { text-wrap: balance; } /* (the payment line: two even lines on a computer, never one word left alone) */
html[lang="en"] .a9-care-t p { text-wrap: pretty; }

/* ---------- Preguntas frecuentes ---------- */
.a9-faq-grid { display: grid; gap: 32px; }
@media (min-width: 960px) {
  .a9-faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; gap: 32px 64px; }
  .a9-faq-head { grid-column: 1; grid-row: 1; }
  .a9-qs { grid-column: 2; grid-row: 1 / span 2; }
  .a9-ask { grid-column: 1; grid-row: 2; align-self: start; max-width: 400px; }
}
.a9-qs { display: grid; gap: 10px; }
.a9-q {
  --c: var(--a9-g-coral); --n: var(--a9-coral);
  border: 1.5px solid rgba(26, 20, 36, .05); border-radius: 22px; background: #fff padding-box;
  box-shadow: 0 10px 20px -16px rgba(40, 40, 120, .4);
}
.a9-q:nth-child(5n+2) { --c: var(--a9-g-sky); --n: var(--a9-blue); }
.a9-q:nth-child(5n+3) { --c: var(--a9-g-mint); --n: var(--a9-teal); }
.a9-q:nth-child(5n+4) { --c: var(--a9-g-cool); --n: var(--a9-violet); }
.a9-q:nth-child(5n+5) { --c: var(--a9-g-gold); --n: var(--a9-amber); }
.a9-q summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: 64px; padding: 16px 16px 16px 18px; border-radius: 20px; cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.a9-q summary::-webkit-details-marker { display: none; }
/* no ring after a click or a tap; a quiet ink ring (over the card's own border) only when reached with the keyboard */
.a9-q summary:focus { outline: none; }
.a9-q summary:focus-visible { outline: 2px solid rgba(26, 20, 36, .55); outline-offset: 2px; }
@supports selector(:has(*)) { /* the ring goes round the whole card, open or not */
  .a9-q summary:focus-visible { outline: none; }
  .a9-q:has(> summary:focus-visible) { outline: 2px solid rgba(26, 20, 36, .5); outline-offset: 3px; }
}
.a9-q summary::marker { content: ""; }
.a9-q-n { min-width: 1.5em; font: 800 .95rem/1 var(--a9-fd); color: var(--n); font-variant-numeric: tabular-nums; }
.a9-q-t { font: 600 1.06rem/1.35 var(--a9-fb); color: var(--a9-ink); text-wrap: pretty; }
.a9-q-x { /* the + is a small round button that spins into an × (in step with the answer opening: after15.js, 260 ms).
     It keeps its own layer, so the spin never creates or drops one while the answer moves */
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); transition: transform .32s var(--a9-spring); will-change: transform;
}
.a9-q-x::before, .a9-q-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; margin: -1.25px 0 0 -7px; border-radius: 2px; background: var(--a9-ink); }
.a9-q-x::after { transform: rotate(90deg); }
.a9-q[open]:not(.is-closing) .a9-q-x { transform: rotate(135deg); }
@media (hover: hover) { .a9-q summary:hover .a9-q-x { transform: rotate(12deg) scale(1.06); } .a9-q[open]:not(.is-closing) summary:hover .a9-q-x { transform: rotate(135deg) scale(1.06); } }
.a9-a { padding: 0 20px 0 18px; } /* no padding above or below: after15.js animates this box's height from 0 to its content */
.a9-a p { max-width: 62ch; padding-bottom: 22px; font: 400 1.02rem/1.6 var(--a9-fb); color: var(--a9-ink2); }
@media (min-width: 560px) { .a9-a { padding-left: calc(18px + 1.5em + 14px); padding-right: 62px; } }

.a9-ask { position: relative; overflow: hidden; padding: 26px 24px 24px; border-radius: 24px; background: linear-gradient(150deg, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .5) 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); }
.a9-ask::after { content: "?"; position: absolute; right: 20px; top: 20px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--a9-g-mint); color: var(--a9-ink); font: 800 1.2rem/1 var(--a9-fd); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.a9-ask-t { position: relative; font: 800 1.25rem/1.2 var(--a9-fd); letter-spacing: -.01em; padding-right: 48px; }
.a9-ask p:not(.a9-ask-t) { margin-top: 6px; color: var(--a9-muted); font-weight: 500; }
.a9-ask .a9-btn { margin-top: 18px; min-height: 48px; padding: 0 20px; }

/* ---------- Contacto ----------
   Phone: heading, then the form, then the contact details (the "Concepto gratis" links land on a visible form).
   Desktop: details on the left under the heading, the form on the right, the whole section on one screen
   (checked at 1280×800 and 1440×900, landing where the links put it: its top just under the header). */
/* (above the footer: the form's soft shadow runs on into it instead of being cut off. No space of its own under it: the
   footer starts one section's space (--a9-pad) under its last line, the same as any section's words end above the next) */
.a9-contact { z-index: 1; padding: clamp(40px, 6vw, 64px) 0 0; }
.a9-c-grid { display: grid; gap: 22px; }
.a9-c-head .a9-eyebrow { margin-bottom: 12px; }
.a9-c-head .a9-lead { margin-top: 12px; }
/* The heading in two lines on a tablet and a computer too, as on a phone: "¿Vemos cómo quedaría / tu nueva web?" (the
   rainbow phrase whole on the second line, never "quedaría tu / nueva web?"). Its size follows its own column (cqi: a
   hundredth of the column's width): the first line is about 10.3 em wide, so 9.3cqi fills about 95% of the column at
   every width, with room to spare for the browser's own rounding. (The phone has its own rule, further down.) */
@media (min-width: 560px) {
  .a9-c-head { container-type: inline-size; }
  .a9-c-head .a9-h2 { font-size: min(9.3cqi, 76px); max-width: none; text-wrap: wrap; } /* (balance would pull "quedaría" down) */
  .a9-c-head .a9-h2 em { white-space: nowrap; }
}
@media (min-width: 960px) {
  .a9-contact { padding-top: clamp(24px, 4.2vh, 44px); }
  .a9-c-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; gap: 24px 56px; }
  .a9-c-head { grid-column: 1; grid-row: 1; }
  /* (the same columns as before, so the form keeps its room; the heading follows its column: about 38 px at 1024 wide,
     48 at 1280, 50 at 1440, and the same 58 px top size as before on the widest screens) */
  .a9-c-head .a9-h2 { font-size: min(9.3cqi, 58px); }
  .a9-c-head .a9-lead { font-size: 1.08rem; max-width: 40ch; }
  .a9-form-wrap { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .a9-info { grid-column: 1; grid-row: 2; align-self: end; }
}
.a9-form-wrap {
  padding: 2px; border-radius: 30px;
  background: linear-gradient(140deg, #5BE3B9 0%, #4CC9F0 28%, #4361EE 56%, #9B5DE5 78%, #FFB020 100%);
  box-shadow: 0 40px 70px -42px rgba(40, 60, 160, .6);
}
.a9-form { position: relative; padding: clamp(20px, 2.3vw, 30px); border-radius: 28px; background: #fff; }
.a9-form-h { font: 800 clamp(1.35rem, 1.15rem + .7vw, 1.6rem)/1.15 var(--a9-fd); letter-spacing: -.02em; }
.a9-form-sub { margin-top: 4px; color: var(--a9-faint); font: 500 .96rem/1.4 var(--a9-fb); }
.a9-field { display: grid; gap: 6px; margin-top: 14px; }
.a9-pair { display: grid; column-gap: 14px; }
@media (min-width: 560px) { .a9-pair { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; } } /* the wider one keeps "Donde te enviamos el concepto" whole */
.a9-field label { font: 700 .93rem/1.25 var(--a9-fb); color: var(--a9-ink); }
.a9-field label span { font-weight: 500; color: var(--a9-faint); }
.a9-field input, .a9-field textarea {
  width: 100%; min-height: 50px; padding: 12px 15px; margin: 0;
  font: 500 1.0625rem/1.4 var(--a9-fb); color: var(--a9-ink);
  background: #F9FAFE; border: 1.5px solid #8C819A; border-radius: 14px; outline: 2px solid transparent;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.a9-field input { text-overflow: ellipsis; }
.a9-field textarea { display: block; min-height: 0; resize: vertical; } /* three rows (rows="3") */
@media (max-width: 559px) { .a9-field input, .a9-field textarea { padding: 12px 13px; font-size: 16px; } } /* 16px: iOS does not zoom in */
@media (max-width: 399px) { .a9-form { padding: 20px 16px; } }
@media (max-width: 559px) {
  /* a phone: the heading and the whole form, send button included, fit one upright screen where the "Concepto gratis"
     links land (390 wide: the button ends about 633 px from the top, inside the ~640–660 px Safari shows with its bars) */
  .a9-contact { padding-top: 16px; }
  .a9-c-grid { gap: 10px; }
  /* (a block, not inline: no line box round it, so no extra space above and below the small caps) */
  .a9-c-head .a9-eyebrow { display: flex; width: fit-content; margin-bottom: 12px; }
  /* two lines: "¿Vemos cómo quedaría / tu nueva web?" (the rainbow phrase stays whole, on the second line). The first line
     is about 10.4 em wide at this size (Bricolage's optical sizing widens it as it gets smaller): 8.1vw keeps it inside
     the screen, with room to spare, at every phone width from 320 px up */
  .a9-c-head .a9-h2 { font-size: min(8.1vw, 40px); max-width: none; text-wrap: wrap; } /* (balance would pull "quedaría" down) */
  .a9-c-head .a9-h2 em { white-space: nowrap; }
  .a9-c-head .a9-lead { margin-top: 8px; font-size: .95rem; line-height: 1.4; }
  .a9-form { padding: 16px 16px 18px; }
  /* the card's own title and line under it only repeat the heading and the lead just above: kept for screen readers */
  .a9-form-h { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .a9-form-sub { display: none; }
  .a9-field { margin-top: 9px; gap: 4px; }
  .a9-form-body > .a9-field:first-of-type { margin-top: 0; }
  .a9-field label { font-size: .875rem; line-height: 1.15; }
  .a9-field input { min-height: 44px; padding-block: 9px; }
  .a9-field textarea { height: 64px; padding-block: 9px; line-height: 1.35; } /* two lines for the optional note (it scrolls, and can be pulled taller) */
  .a9-form .a9-help { font-size: .8rem; line-height: 1.3; } /* (.a9-form: these two rules come before the general ones below) */
  .a9-form .a9-send { min-height: 50px; margin-top: 12px; }
}
.a9-field input::placeholder, .a9-field textarea::placeholder { color: #716680; opacity: 1; }
.a9-field input:focus, .a9-field textarea:focus { background: #fff; border-color: var(--a9-focus); box-shadow: 0 0 0 4px rgba(91, 60, 240, .18); }
.a9-field input:focus-visible, .a9-field textarea:focus-visible { outline: 2px solid transparent; }
.a9-help { font: 500 .86rem/1.35 var(--a9-fb); color: var(--a9-faint); }
.a9-err { display: flex; align-items: flex-start; gap: 8px; font: 600 .92rem/1.35 var(--a9-fb); color: #B00D29; }
.a9-err:empty { display: none; }
.a9-err::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: .5px; border-radius: 50%; background: #B00D29; color: #fff; font: 800 .72rem/1 var(--a9-fd); }
.a9-field.is-bad input, .a9-field.is-bad textarea { border-color: #B00D29; background: #FFF6F7; }
.a9-field.is-bad input:focus, .a9-field.is-bad textarea:focus { box-shadow: 0 0 0 4px rgba(176, 13, 41, .16); }
.a9-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.a9-send {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 54px; margin-top: 18px; padding: 0 22px; border: 0; border-radius: 999px;
  font: 700 1.06rem/1.2 var(--a9-fb); color: #fff; cursor: pointer;
  background: linear-gradient(100deg, #1C6FD6 0%, #3A55E8 50%, #6A2BF0 100%); /* white text 4.9:1 at the lightest stop */
  box-shadow: 0 18px 32px -18px rgba(40, 70, 220, .85);
  transition: transform .2s var(--a9-e), box-shadow .2s var(--a9-e), filter .2s;
}
.a9-send svg { width: 20px; height: 20px; stroke-width: 2.3; transition: transform .25s var(--a9-e); }
@media (max-width: 359px) { .a9-send { gap: 8px; padding: 0 14px; font-size: .98rem; } } /* the label stays on one line at 320 px */
@media (hover: hover) { .a9-send:hover { transform: translateY(-2px); box-shadow: 0 22px 36px -18px rgba(40, 70, 220, .9); } .a9-send:hover svg { transform: translateX(3px); } }
.a9-send:active { transform: translateY(1px); }
.a9-send[disabled] { cursor: progress; filter: saturate(.75); transform: none; }
.a9-form.is-sending .a9-send svg { display: none; }
.a9-form.is-sending .a9-send::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: a9-spin .8s linear infinite; }
@keyframes a9-spin { to { transform: rotate(360deg); } }
/* the promise under the button (in ink), then the privacy line in small print: both centred under the button, the
   link to the policy kept whole on one line */
.a9-promise { margin-top: 10px; text-align: center; font: 600 .9rem/1.4 var(--a9-fb); color: var(--a9-ink2); text-wrap: balance; }
.a9-consent { margin-top: 10px; text-align: center; font: 500 .84rem/1.45 var(--a9-fb); color: var(--a9-faint); text-wrap: balance; }
.a9-consent a { white-space: nowrap; }
.a9-consent a, .a9-status a, .a9-ok a { color: var(--a9-ink); font-weight: 700; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.a9-status { margin-top: 14px; padding: 13px 15px; border-radius: 14px; font: 600 .95rem/1.45 var(--a9-fb); background: #EEF2FD; color: var(--a9-ink); }
.a9-status:empty { display: none; }
.a9-status[data-tone="busy"] { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* "Enviando…" is already on the button */
.a9-status a[href^="tel:"], .a9-foot-col a[href^="tel:"] { white-space: nowrap; }
.a9-status[data-tone="error"] { background: #FFF0F2; color: #9F0B25; }
.a9-status[data-tone="error"] a { color: #9F0B25; }
.a9-status[data-tone="warn"] { background: #FFF4E0; color: #6E3800; }
.a9-status[data-tone="warn"] a { color: #6E3800; }

.a9-ok { position: relative; padding: 34px 6px 18px; text-align: center; }
.a9-ok-h { display: inline-block; font: 800 clamp(2.4rem, 1.8rem + 3vw, 3.2rem)/1.05 var(--a9-fd); letter-spacing: -.035em; outline: none; }
.a9-ok p { margin: 14px auto 0; max-width: 32ch; font: 500 1.08rem/1.5 var(--a9-fb); color: var(--a9-ink2); text-wrap: balance; }
.a9-ok .a9-ok-wa { margin-top: 10px; font-size: 1rem; color: var(--a9-faint); }
.a9-burst { position: relative; height: 54px; }
.a9-burst i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--c); opacity: 0; animation: a9-burst 1.1s var(--a9-e) forwards; animation-delay: var(--d, 0ms); }
.a9-burst i:nth-child(1) { --c: #FF5A4E; --x: -88px; --y: -6px; --r: -40deg; }
.a9-burst i:nth-child(2) { --c: #FF9F1C; --x: -62px; --y: -26px; --r: 30deg; --d: 40ms; }
.a9-burst i:nth-child(3) { --c: #FFD23F; --x: -30px; --y: -34px; --r: -20deg; --d: 80ms; }
.a9-burst i:nth-child(4) { --c: #3BCEAC; --x: 0px; --y: -38px; --r: 45deg; --d: 20ms; }
.a9-burst i:nth-child(5) { --c: #4CC9F0; --x: 30px; --y: -32px; --r: -35deg; --d: 60ms; }
.a9-burst i:nth-child(6) { --c: #4361EE; --x: 62px; --y: -24px; --r: 25deg; --d: 100ms; }
.a9-burst i:nth-child(7) { --c: #9B5DE5; --x: 88px; --y: -4px; --r: -50deg; --d: 30ms; }
.a9-burst i:nth-child(8) { --c: #FF6B4A; --x: -46px; --y: 14px; --r: 60deg; --d: 90ms; }
.a9-burst i:nth-child(9) { --c: #FF9F1C; --x: 46px; --y: 14px; --r: -60deg; --d: 50ms; }
.a9-burst i:nth-child(10) { --c: #3BCEAC; --x: 0px; --y: 4px; --r: 15deg; --d: 0ms; width: 18px; height: 18px; margin: -9px; }
@keyframes a9-burst {
  0% { opacity: 0; transform: translate(0, 18px) scale(.2); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); }
}

.a9-rows { list-style: none; padding: 0; display: grid; gap: 8px; }
.a9-row {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 9px 14px;
  border-radius: 18px; background: #fff; color: var(--a9-ink); text-decoration: none;
  box-shadow: 0 16px 30px -26px rgba(30, 50, 110, .55);
  transition: transform .25s var(--a9-e), box-shadow .25s var(--a9-e);
}
.a9-row-i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--a9-ink); }
.a9-row-i svg { width: 20px; height: 20px; stroke-width: 1.9; }
.a9-row-i--sky { background: var(--a9-g-sky); }
.a9-row-i--lilac { background: var(--a9-g-cool); }
.a9-row-i--mint { background: var(--a9-g-teal); }
.a9-row-i--peach { background: var(--a9-g-gold); }
.a9-row-i--tg { background: var(--a9-g-tg); }
.a9-row-i--tg svg { translate: -1px .5px; } /* (the plane's optical centre) */
.a9-row-t { display: grid; gap: 4px; min-width: 0; }
.a9-row-t small { font: 700 .68rem/1 var(--a9-fb); letter-spacing: .14em; text-transform: uppercase; color: var(--a9-faint); }
.a9-row-t b { font: 700 1.04rem/1.2 var(--a9-fd); overflow-wrap: anywhere; }
.a9-row-go { display: none; margin-left: auto; align-items: center; gap: 6px; padding-left: 8px; font: 700 .9rem/1 var(--a9-fb); color: var(--a9-blue); white-space: nowrap; }
.a9-row-go::after { content: "→"; transition: transform .25s var(--a9-e); }
@media (min-width: 400px) { .a9-row-go { display: inline-flex; } }
@media (hover: hover) {
  a.a9-row:hover { transform: translateY(-2px); box-shadow: 0 22px 36px -26px rgba(30, 50, 110, .6); }
  a.a9-row:hover .a9-row-go::after { transform: translateX(3px); }
}
.a9-reply { display: flex; align-items: center; gap: 10px; margin-top: 14px; font: 600 .96rem/1.4 var(--a9-fb); color: var(--a9-muted); }
.a9-reply i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #22B573; box-shadow: 0 0 0 4px rgba(34, 181, 115, .18); }

/* ---------- footer ---------- */
/* Contacto's periwinkle turns into the footer's own soft lilac over a long, even ramp (--r: its length), which lightens a
   little under the wordmark: no edge anywhere, light and bright to the end. Text colours on the lilac: 11:1+ (links),
   6.5:1+ (the line under the logo), 5.5:1+ (small print). */
.a9-foot {
  --a9-muted: #463C56; --a9-faint: #524762;
  --r: clamp(200px, 22vw, 320px);
  position: relative; isolation: isolate; overflow: hidden; padding: var(--a9-pad) 0 0; color: var(--a9-ink);
  background: linear-gradient(180deg, var(--a9-f-peri) 0, var(--a9-f-lilac) var(--r), var(--a9-f-lilac) 55%, var(--a9-f-dawn) 100%);
}
/* Phone: the brand block across the top, then four lists in a 2 × 2 grid, all the same: Servicios beside Contacto, then
   Oficina beside Legal (each list's lines one under the other). 600–899 px (a phone on its side, a tablet): the brand block
   on top, then three columns (Servicios · Contacto · the office over the legal links). 900 px and up: four columns (brand ·
   Servicios · Contacto · the office over the legal links). */
.a9-foot-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 28px;
  grid-template-areas: "brand brand" "svc contact" "office legal";
  padding: 0 0 30px; border-bottom: 1.5px solid rgba(26, 20, 36, .12);
}
.a9-foot-brand { grid-area: brand; margin-bottom: 8px; }
.a9-foot-svc { grid-area: svc; }
.a9-foot-contact { grid-area: contact; }
.a9-foot-office { grid-area: office; }
.a9-foot-legal { grid-area: legal; }
@media (min-width: 600px) and (max-width: 899px) {
  .a9-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 0; grid-template-areas: "brand brand brand" "svc contact office" "svc contact legal"; grid-template-rows: auto auto 1fr; }
  .a9-foot-brand { margin-bottom: 36px; }
  .a9-foot-legal { margin-top: 24px; }
}
@media (min-width: 900px) {
  .a9-foot-grid {
    grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 40px; row-gap: 0;
    grid-template-areas: "brand svc contact office" "brand svc contact legal";
  }
  .a9-foot-brand { margin-bottom: 0; }
  .a9-foot-legal { margin-top: 26px; }
}
.a9-brand { display: inline-block; white-space: nowrap; font: 800 1.55rem/1 var(--a9-fd); letter-spacing: -.02em; text-decoration: none; color: var(--a9-ink); }
/* GPT.UNO's dot (the logo and the big wordmark, the same as the header's): a real round period in the knot's rainbow.
   An empty inline block sits with its bottom edge on the baseline, exactly where the font's own period sits; it is a touch
   bigger than that period, so its colours read */
.a9 .dot { display: inline-block; width: .24em; height: .24em; margin: 0 .05em; vertical-align: baseline; border-radius: 50%; background: var(--a9-logo-dot); }
/* The big word's dot: the big word is tracked tighter, so its dot keeps as close to the U as the font's own period did.
   It is big (about 20 px on a phone, 70 px at 1440 wide), where a plain conic gradient meets in a sharp point in its
   middle and reads as a colour picker: the same colours, in the same order, are blurred a little inside its crisp round
   edge, so its middle melts softly */
.a9-foot-word .dot { position: relative; overflow: hidden; margin: 0 0 0 .03em; background: none; }
.a9-foot-word .dot::before { content: ""; position: absolute; inset: -12%; background: var(--a9-logo-dot); filter: blur(.02em); }
.a9-foot-brand > p { margin-top: 14px; max-width: 38ch; font: 500 1rem/1.55 var(--a9-fb); color: var(--a9-muted); }
/* one compact button under the line, the same action and colour as everywhere else */
.a9-foot-go { display: flex; margin-top: 22px; }
.a9-btn--sm { min-height: 46px; padding: 0 20px; gap: 8px; font-size: .95rem; }
.a9-btn--sm svg { width: 16px; height: 16px; }
.a9-foot-col h2 { margin-bottom: 10px; font: 700 .74rem/1 var(--a9-fb); letter-spacing: .14em; text-transform: uppercase; color: var(--a9-faint); }
.a9-foot-col ul { list-style: none; padding: 0; display: grid; }
.a9-foot-col li { padding: 6px 0; font: 500 .97rem/1.35 var(--a9-fb); overflow-wrap: anywhere; }
@media (min-width: 900px) { .a9-foot-col li { padding: 7px 0; font-size: 1rem; } }
@media (max-width: 389px) { .a9-foot-grid { column-gap: 12px; } .a9-foot-col li { font-size: .92rem; } } /* ("Reservas y citas online" on one line at 375 px) */
.a9-foot-svc li { overflow-wrap: normal; color: var(--a9-ink2); }
.a9-foot-col a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .3s var(--a9-e); }
.a9-foot-col a:hover { background-size: 100% 1.5px; }
.a9-nw { white-space: nowrap; }
.a9-foot-word { /* fit-content: the whole rainbow runs across the word, not across the page. Every letter whole, at every width:
     the padding keeps the round letters' overshoot and the last letter's tracking inside the painted box */
  width: fit-content; max-width: 100%; margin: 0 auto -.05em; padding: .06em .09em .02em; white-space: nowrap; user-select: none; pointer-events: none;
  font: 800 min(21vw, 340px)/.9 var(--a9-fd); letter-spacing: -.035em; /* (21vw: the word plus its padding stays inside the screen even at 320 px) */
  background: var(--a9-word); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.a9-foot-copy { /* the only company line, at the very bottom */
  position: relative; padding: 8px var(--a9-gut) calc(20px + env(safe-area-inset-bottom)); text-align: center;
  font: 500 .88rem/1.4 var(--a9-fb); color: var(--a9-faint);
}

/* ---------- floating WhatsApp (hidden until after15.js turns it on) ---------- */
.a9-wa {
  position: fixed; z-index: 35;
  right: calc(env(safe-area-inset-right) + 16px); bottom: calc(env(safe-area-inset-bottom) + 16px);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 60px; height: 60px; border-radius: 20px;
  background: linear-gradient(140deg, #5BE49B 0%, #3BCEAC 50%, #4CC9F0 100%); color: var(--a9-ink);
  font: 700 1rem/1 var(--a9-fb); text-decoration: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 18px 34px -14px rgba(16, 120, 100, .65), inset 0 0 0 2px rgba(255, 255, 255, .55);
  opacity: 0; visibility: hidden; transform: translateY(20px) scale(.82) rotate(-10deg);
  transition: opacity .3s var(--a9-e), transform .5s var(--a9-spring), visibility 0s linear .5s;
}
.a9-wa.is-on { opacity: 1; visibility: visible; transform: rotate(-4deg); transition: opacity .3s var(--a9-e), transform .5s var(--a9-spring), visibility 0s; }
.a9-wa svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a9-wa span { display: none; }
@media (hover: hover) { .a9-wa.is-on:hover { transform: rotate(0deg) translateY(-2px); } }
/* It only shows where it can never cover anything: in the empty margin beside the 1320 px column (from 1400 px wide,
   as a round 56 px button). Below that it stays away; WhatsApp is in the film's last frame, Contacto and the footer. */
@media (max-width: 1399px) { .a9-wa, .a9-wa.is-on { display: none; } }
@media (min-width: 1400px) {
  .a9-wa { width: 56px; height: 56px; border-radius: 999px; right: calc(env(safe-area-inset-right) + 22px); bottom: calc(env(safe-area-inset-bottom) + 24px); }
  .a9-wa.is-on { transform: none; }
}
/* very wide screens (1600 px and up), where the film's own headings grow to about 90–120 px: the column and the section
   headings grow a little with them, so Precios does not look small after the giant "¿Hablamos?". (Contacto's heading keeps
   its size: the whole section still fits one screen.) */
@media (min-width: 1600px) {
  .a9-wrap { max-width: min(1520px, 84vw); }
  .a9-h2 { font-size: clamp(76px, 4.6vw, 96px); }
  .a9-lead { font-size: clamp(1.24rem, .3rem + .76vw, 1.45rem); }
}

/* a section reached by an in-page link takes keyboard focus without a ring round the whole section */
.a9 [tabindex="-1"]:focus { outline: none; }

/* ---------- reveal on scroll (only once after15.js has armed it; without JS everything is simply there) ---------- */
.a9-rv-on [data-a9-rv] { transition: opacity .7s var(--a9-e) calc(var(--i, 0) * 70ms), transform .85s var(--a9-e) calc(var(--i, 0) * 70ms); }
.a9-rv-on .a9-plan[data-a9-rv] { transform-origin: 50% 100%; transition-duration: .7s, 1s; }
.a9-rv-on .a9-q[data-a9-rv] { transition: opacity .6s var(--a9-e) calc(var(--i, 0) * 35ms), transform .7s var(--a9-e) calc(var(--i, 0) * 35ms); }
.a9-rv-on [data-a9-rv]:not(.is-in) { opacity: 0; transform: translateY(26px); }
.a9-rv-on .a9-plan[data-a9-rv]:not(.is-in) { transform: perspective(1100px) translateY(54px) rotateX(16deg) rotate(-3.5deg) scale(.96); }
.a9-rv-on .a9-plan[data-a9-rv]:not(.is-in):nth-child(even) { transform: perspective(1100px) translateY(54px) rotateX(16deg) rotate(3deg) scale(.96); }
.a9-rv-on .a9-q[data-a9-rv]:not(.is-in) { transform: translateY(18px) rotate(-.6deg); }
/* the price cards rise one by one in the wide grid; in the phone carousel the row rises as one (a card off to the side of a
   scroller never "enters the screen", so it could not reveal itself) */
@media (min-width: 720px) { .a9-rv-on .a9-plans[data-a9-rv]:not(.is-in) { opacity: 1; transform: none; } }
@media (max-width: 719px) { .a9-rv-on .a9-plans .a9-plan[data-a9-rv]:not(.is-in):nth-child(n) { opacity: 1; transform: none; } }

@media (forced-colors: active) {
  .a9-h2 em, .a9-ok-h, .a9-foot-word { color: CanvasText; background: none; }
  .a9 .dot { forced-color-adjust: none; background: CanvasText; }
  .a9-foot-word .dot::before { display: none; }
  .a9-q-x::before, .a9-q-x::after { background: CanvasText; }
}