/* ============================================================================
   CONTACTO
   ---------------------------------------------------------------------------
   Two versions were thrown away before this one, and the reasons are the
   design:

   1st — the photograph opened scaled to 2.6x and pulled back. A 2400px file
   blown to 2.6 of a 1440 frame is drawn from a quarter of the data it needs.
   An upscaled crop is the one thing that reads as cheap however good the type
   is, and it was the first thing on the page.

   2nd — full-bleed photograph, big white headline, dark gradient over it. That
   is a 2014 hero. It is also, on THIS file, put in the worst possible place.
   The photograph was measured on a 12x16 grid before anything else was drawn:

       luminance      the right half below row 7 sits at 13-29 of 255
       gradient       ...at 0-7, the flattest region in the frame
       gradient       cols 1-3, rows 8-13 run 24-37 — the busiest, the wheel
       luminance      col 0, rows 9-15 runs 166-202 — a hard bright strip
       saturation     rows 7-13, cols 5-11 hit 60-75% — the red tail light

   The words were set in the bottom left. That is the wheel and the lit floor:
   the noisiest and the brightest thing in the picture, which is exactly why it
   needed a heavy scrim to survive — the scrim was treating a self-inflicted
   wound.

   So the type came off the photograph entirely. The file is 3:4 portrait, so it
   is given a portrait-shaped field: a tall column on the right, where 620x828
   at 1440 crops it by almost nothing, against 53% thrown away before. The words
   sit on the page ground in ink, at full contrast, needing no scrim at all.

   Everything on the page hangs on one grid, declared once below, so the left
   edge of the opening line, of every heading, and of the map's caption is the
   same edge all the way down.
   ========================================================================= */

.ct{ background:var(--mc-bg); }

/* ---- THE GRID ------------------------------------------------------------
   One declaration, used by every section that has to reach the edge of the
   screen. The container and the gutters are the tokens the rest of the site
   already uses, so a section built on this lines up with any .cat-wrap above
   or below it to the pixel.

   Deliberately NOT built from vw. `calc((100vw - 1200px)/2)` is the usual way
   to write this and it is wrong by half the scrollbar — 100vw counts the
   scrollbar, an element's width does not — so a hero built that way sits ~7px
   off every section under it. These tracks are resolved from this element's
   own width, which is the same width .cat-wrap resolves from.
   ========================================================================= */
.ct-grid{
  /* The gutter switches at exactly the breakpoint .cat-wrap switches at. */
  --ct-gut:var(--mc-gutter-m);
  display:grid;
  /* The main track is the container MINUS its two gutters, because that is
     .cat-wrap's content box — the box every heading on this site already sits
     in. Built from the container width and not from 100vw: `calc((100vw -
     1200px)/2)` is the usual way to write a full-bleed grid and it is wrong by
     half a scrollbar, since 100vw counts the scrollbar and an element's width
     does not. First measured version of this grid put main-start at 120px
     while every .cat-wrap section under it started at 152. */
  grid-template-columns:
    [full-start] minmax(var(--ct-gut), 1fr)
    [main-start] repeat(12, minmax(0, calc((var(--mc-container) - 2 * var(--ct-gut)) / 12))) [main-end]
    minmax(var(--ct-gut), 1fr) [full-end];
}
@media (min-width:768px){ .ct-grid{ --ct-gut:var(--mc-gutter-d); } }

/* Section air. 96 a side, so two adjacent sections give 192px. 128 was tried
   and 128+128 = 256px of nothing reads as a hole rather than as air. */
.ct-sec{ padding-block:var(--s-9); }
@media (max-width:759.98px){ .ct-sec{ padding-block:var(--s-7); } }

/* ==========================================================================
   THE OPENING — words left, photograph right
   The photograph holds for the whole of the first act (the statement and the
   three ways of reaching him) instead of being scrolled away like a banner.
   ======================================================================== */
.ct-open{ position:relative; }

/* Three blocks, two rows: the statement, the ways under it, and the photograph
   holding both. Split into two elements rather than one tall column so that on
   a phone the photograph can sit BETWEEN them — see the phone block below. */
.ct-open{ grid-template-rows:auto 1fr; }
.ct-open__say{
  grid-column:main-start / span 7; grid-row:1;
  padding-block:var(--s-9) 0; align-self:start;
}
.ct-open__ways-wrap{
  grid-column:main-start / span 7; grid-row:2;
  padding-block:0 var(--s-10); align-self:start;
}
.ct-open__pic{ grid-column:span 5 / full-end; grid-row:1 / span 2; position:relative; }
.ct-open__hold{
  /* Fills the column exactly, and is still.

     It was `position:sticky; top:0` at one screen tall. That measured well and
     looked wrong: the column is 1,049px and the photograph 828, so from scroll
     ~180 to the end of the section a 43px band of page ground opened between
     the bottom of the photograph and the top of the map. Small, and exactly the
     kind of seam that reads as unfinished. Filling the column removes the seam
     at every scroll position instead of hiding it at two of them.

     Still, rather than drifting, is the other half of that decision. A sharp
     photograph that sits where it was put is more confident than one that
     creeps; the motion on this page is the arrival and the map's colour, and
     both of those answer something the reader did. */
  position:absolute; inset:0;
  overflow:clip;   /* clip, not hidden: `hidden` here would make a scroll
                      container, which is how a sticky ancestor dies silently */
  background:var(--mc-deep);
}
.ct-open__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  /* Chosen from the frame, not from habit. On the 12x16 map of this file the
     car occupies columns 3-11; column 0 is a hard bright strip (luminance
     166-202) and columns 1-3 below row 7 are the busiest region in the whole
     picture (gradient 24-37 — the wheel and its reflections). At 1440 the
     column is 531x1049 and cover throws away 33% of the width, so biasing to
     68% spends that crop on the bright noisy left edge and on a sliver of the
     car's right side that is near-black (luminance 13-16) and carries nothing.
     46% vertically keeps the roofline and the tail light and gives up floor. */
  object-position:68% 46%;
}

.ct-open__kick{
  margin:0 0 var(--s-5);
  font-size:var(--t-prose); line-height:1.5; color:var(--mc-ink-2);
}
.ct-open__h{
  margin:0; color:var(--mc-ink); font-weight:700;
  font-size:var(--t-mega);
  line-height:.96;          /* under 1, or two lines of 88px type drift apart */
  letter-spacing:-.035em;   /* and negative, or big type reads as loose */
}

/* ---- the three ways, at the size a contact page owes them ---------------
   The old page set the phone number at 18px in a 1,440 layout, inside hairline
   rows that read as a spreadsheet. A contact page's content IS the number you
   can call, so the value is the largest thing on the page after the opening
   line — larger than the heading above it. That inversion is deliberate.
   The rules between rows are gone; the space does that, which is why the
   space is large.
   ======================================================================== */
.ct-ways{ list-style:none; margin:var(--s-8) 0 0; padding:0; display:grid; gap:var(--s-8); }
@media (max-width:899.98px){ .ct-ways{ gap:var(--s-7); } }

.ct-way{ display:block; text-decoration:none; color:inherit; }
.ct-way__k{ display:block; margin-bottom:var(--s-2); font-size:var(--t-small); color:var(--mc-ink-2); }
.ct-way__v{
  display:inline-block;
  font-size:var(--t-h1); font-weight:700; letter-spacing:-.030em;
  line-height:1.04; color:var(--mc-ink);
  /* A link has to read as a link without a mouse and without relying on colour:
     a rule under it, faint at rest, ink on hover. At this size an underline is
     an editorial device, not a browser default. */
  text-decoration:underline; text-decoration-thickness:1px;
  text-decoration-color:var(--mc-rule); text-underline-offset:.16em;
  transition:color var(--m-quick) var(--e-out),
             text-decoration-color var(--m-quick) var(--e-out),
             text-decoration-thickness var(--m-quick) var(--e-out);
}
/* 22 characters of address at 52px is 434px and the say column is 700px, but a
   390px phone has 358. The address takes the step below and may break: a
   wrapped address beats a clipped one. */
.ct-way__v--mail{ font-size:var(--t-h2); overflow-wrap:anywhere; }
.ct-way__n{
  display:block; margin-top:var(--s-3); max-width:44ch;
  font-size:var(--t-prose); line-height:1.6; color:var(--mc-ink-2);
}
.ct-way:hover .ct-way__v{
  color:var(--mc-blue); text-decoration-color:currentColor; text-decoration-thickness:2px;
}
.ct-way:focus-visible,
a.ct-way__v:focus-visible{ outline:3px solid var(--mc-focus); outline-offset:6px; border-radius:2px; }
a.ct-way__v:hover{ color:var(--mc-blue); text-decoration-color:currentColor; text-decoration-thickness:2px; }
/* The main way is not one link: the number (a tel: link) and two buttons.
   Hovering its buttons must not light the number up as though it were pressed. */
li.ct-way:hover .ct-way__v:not(:hover){ color:var(--mc-ink); text-decoration-color:var(--mc-rule); text-decoration-thickness:1px; }
.ct-way__go{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5); }
@media (max-width:899.98px){
  /* Thumb-sized, and the one people use most is the wider one. 52px: the
     preferred 48 plus a step, because this is the page's reason to exist. */
  .ct-way__go{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
  .ct-way__go .mc-btn{ min-height:calc(var(--mc-tap-pref) + var(--s-1)); justify-content:center; }
  /* "Escribir por WhatsApp" broke onto two lines in 2/3 of 358px. The button
     already wears the WhatsApp mark and the green; the word alone says it. */
  .ct-way__long{ display:none; }
  /* 22 characters at 28px broke "gmail.c|om" at 320. At 22px it fits 288. */
  .ct-way__v.ct-way__v--mail{ font-size:var(--t-km); }   /* two classes: the phone block's .ct-way__v comes later */
}

/* ---- the phone: one column, photograph first --------------------------- */
/* ---- the phone: statement, photograph, ways ----------------------------
   The photograph led, and at 3:4 it is 520 of a 844px screen: the header took
   100 and the dock 64, so the second line of the opening statement was behind
   the dock at the fold. Reordered, the statement is read first, the photograph
   answers it, and the ways follow — which is also the DOM order, so what is
   seen and what is announced are the same sequence.
   Its own ratio, uncropped: on a phone the full width IS the photograph's
   width, so there is no reason to take anything off it.
   ======================================================================== */
@media (max-width:899.98px){
  .ct-open{ display:flex; flex-direction:column; }
  /* DOM order is say, ways, picture — the order a screen reader should hear.
     Visually the picture belongs between the statement and the ways, which is
     what these three lines do and the only thing they do. */
  /* 2026-09-23: say, ways, photograph — the DOM order, so nothing is reordered.
     The photograph led the ways, and at 3:4 it was 520px: the first way to reach
     him started at y 913 on an 844 screen. A contact page whose first screen
     cannot contact anyone is a poster. Now the two buttons land at ~y 560, in the
     lower half where the thumb is, and the photograph closes the act instead of
     opening it. */
  .ct-open__hold{ position:static; aspect-ratio:4 / 3; }
  /* 4:3 out of a 3:4 file keeps 56% of its height. The 12x16 map puts the tail
     light and the wheel in rows 7-13; 72% frames rows 5-14 and gives up the
     ceiling, which carries nothing. */
  .ct-open__img{ object-position:50% 72%; }
  .ct-open__say{ padding-inline:var(--mc-gutter-m); padding-block:var(--s-6) 0; }
  .ct-open__ways-wrap{ padding-inline:var(--mc-gutter-m); padding-block:0 var(--s-7); }
  .ct-open__kick{ margin-bottom:var(--s-3); font-size:var(--t-small); }
  .ct-ways{ margin-top:var(--s-5); gap:var(--s-6); }
  .ct-way__v{ font-size:var(--t-h2); }
  .ct-way__n{ font-size:var(--t-small); margin-top:var(--s-2); }
}
@media (min-width:760px) and (max-width:899.98px){
  .ct-open__say,
  .ct-open__ways-wrap{ padding-inline:var(--mc-gutter-d); }
  .ct-open__hold{ aspect-ratio:16 / 10; }   /* a tablet-wide 3:4 is a whole screen of car */
}

/* ---- one heading treatment, used by every section ---------------------- */
.ct-h2{
  margin:0; font-size:var(--t-h2); font-weight:700;
  letter-spacing:-.020em; line-height:1.08; color:var(--mc-ink);
}
.ct-lede{
  margin:var(--s-4) 0 0; max-width:54ch;
  font-size:var(--t-prose); line-height:1.6; color:var(--mc-ink-2);
}
/* The one-sentence statement. 22 → 28 is the ladder's own step between prose
   and a heading; it is named --t-km because that is where it was first needed,
   but it is a size, and it is the size this sentence wants. */
.ct-say{
  margin:var(--s-5) 0 0; max-width:30ch;
  font-size:var(--t-km); line-height:1.24; letter-spacing:-.015em;
  color:var(--mc-ink); font-weight:500;
}

/* ==========================================================================
   WHERE — full bleed on the same grid, caption on the same spine
   ======================================================================== */
/* No top padding. The photograph's column ends where the words beside it end,
   and 96px of empty ground between that edge and the map made the photograph
   look like it had simply run out. The map begins on the photograph's last
   line instead: dark field, then light field, one edge, on purpose. */
.ct-where{ padding-block:0; }
/* The caption and the form share one row: 5 | 7, the mirror of
   the opening's 7 | 5, so the page's two split sections answer each other.
   Below 900 both take the whole main track and stack — the same breakpoint the
   opening uses to stack its own two columns. This also fixes something that had
   shipped unnoticed: the caption was `main-start / span 7` at EVERY width, and
   seven of twelve tracks on a 390px phone is 209px, so "Málaga" sat in a
   209px column with 165px of nothing to its right. Measured, not seen — short
   lines wrap plausibly, which is how it survived the phone walk. */
.ct-where__say{ grid-column:main-start / span 5; padding-block:var(--s-9) var(--s-9); }
.ct-write{ grid-column:span 7 / main-end; padding-block:var(--s-9) var(--s-9); }
@media (min-width:900px){
  /* the two columns need a gutter between them that the grid's tracks do not give */
  .ct-where__say{ padding-right:var(--s-8); }
}
@media (max-width:899.98px){
  .ct-where__say{ grid-column:main-start / main-end; padding-block:var(--s-8) 0; }
  .ct-write{ grid-column:main-start / main-end; padding-block:var(--s-8) var(--s-8); }
}
@media (max-width:759.98px){
  /* No padding-inline here: the grid's main track already starts at the
     gutter, and adding it again put this caption 16px right of every other
     heading on the page. */
  .ct-where__say{ padding-block:var(--s-7) 0; }
  .ct-write{ padding-block:var(--s-7) var(--s-7); }
}
/* Where and when are one answer, so they are one section. As a section of its
   own, "Cuándo" was four lines with 250px of empty page above and below — and
   the footer already carries the hours on every page of the site. */
.ct-where__when{
  margin:var(--s-6) 0 0; max-width:46ch;
  font-size:var(--t-prose); line-height:1.6; color:var(--mc-ink-2);
}
.ct-where__say p:last-child{ margin-top:var(--s-5); }
/* 2.5.8 exempts a link inside a sentence, judged by whether text sits beside
   it. This one is alone in its own paragraph, so the exemption does not apply
   and the target has to be 24px. It is given the preferred 44 instead: it is
   the only way off this page and there is room. */
.ct-where__say .mc-link{
  display:inline-flex; align-items:center; min-height:var(--mc-tap);
}

/* ==========================================================================
   THE DISTANCES — a full-bleed dark band, and the page's only grid of thirds

   A band, not another quiet section, because of the same scan: after the
   photograph the page ran for 2,500px without a single surface carrying weight,
   and a page that opens strongly and then goes flat for 60% of its height is
   exactly the "parca ii lipseste ceva" the client could not name. Quiet only
   reads as quiet when something loud sits on either side of it.

   This section earns the weight: it is the only place on the page where other
   people speak, and it is the argument for buying a car from a man with no
   showroom. Navy rather than a tint — --mc-blue-tint measures under 5%
   saturation and would not have registered at all.
   ========================================================================= */
.ct-far{
  background:var(--mc-navy); color:var(--mc-on-navy);
  padding-block:var(--s-10);
}
@media (max-width:759.98px){ .ct-far{ padding-block:var(--s-8); } }
.ct-far .ct-h2{ color:var(--mc-on-navy); }
.ct-far .ct-lede{ color:var(--mc-on-navy-2); }      /* 6.56:1 on navy */
.ct-far .ct-trip__km{ color:var(--mc-on-navy); }
.ct-far .ct-trip__km i{ color:var(--mc-on-navy-2); }
.ct-far .ct-trip__who{ color:var(--mc-on-navy-2); }
.ct-far .ct-trip__said{ color:var(--mc-on-navy); }
.ct-far .ct-note{ color:var(--mc-on-navy-2); }

/* ==========================================================================
   the thirds themselves
   Only cities the review TEXTS name. The author_location column says
   Santander for 19 of 25 rows and contradicts its own quotes.
   ======================================================================== */
.ct-trips{ list-style:none; margin:var(--s-9) 0 0; padding:0; display:grid; gap:var(--s-7); }
@media (min-width:760px){
  .ct-trips{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-6); margin-top:var(--s-8); }
}
.ct-trip__km{
  display:block; font-size:var(--t-h1); font-weight:700;
  letter-spacing:-.030em; line-height:1; color:var(--mc-ink);
  font-variant-numeric:tabular-nums;
}
.ct-trip__km i{
  font-style:normal; font-size:max(var(--t-label), .36em); font-weight:600;
  letter-spacing:0; color:var(--mc-ink-2); margin-left:.22em;
}
.ct-trip__who{ display:block; margin-top:var(--s-3); font-size:var(--t-small); color:var(--mc-ink-2); }
.ct-trip__said{
  display:block; margin-top:var(--s-3); max-width:34ch;
  font-size:var(--t-caption); font-style:italic; line-height:1.5; color:var(--mc-ink);
}
@media (max-width:759.98px){
  /* The number on the left, who and what they said beside it: three trips in
     one screen instead of three screens of 52px numerals stacked. */
  .ct-trips{ gap:var(--s-5); margin-top:var(--s-6); }
  .ct-trips > li{ display:grid; grid-template-columns:6.5rem minmax(0,1fr); column-gap:var(--s-4);
    padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.14); }
  .ct-trip__km{ grid-row:1 / span 2; font-size:var(--t-h2); }
  .ct-trip__who{ margin-top:0; }
  .ct-trip__said{ margin-top:var(--s-2); }
}
.ct-note{ margin:var(--s-8) 0 0; max-width:52ch; font-size:var(--t-small); line-height:1.6; color:var(--mc-ink-2); }

/* ==========================================================================
   THE FORM — beside the caption; the column is its measure
   ======================================================================== */
.ct-form{ margin-top:var(--s-6); display:grid; gap:var(--s-5); }
@media (min-width:760px){ .ct-form{ grid-template-columns:1fr 1fr; } }
.ct-f{ display:grid; gap:var(--s-2); }
.ct-f--wide{ grid-column:1 / -1; }
.ct-f > span{ font-size:var(--t-small); color:var(--mc-ink-2); }
.ct-f > span em{ font-style:normal; color:var(--mc-ink-3); }
.ct-form__go{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-2); }
.ct-form .ct-note{ grid-column:1 / -1; margin-top:0; }
@media (max-width:759.98px){
  .ct-form{ gap:var(--s-4); }
  .ct-form__go{ display:grid; }
  .ct-form__go .mc-btn{ min-height:calc(var(--mc-tap-pref) + var(--s-1)); justify-content:center; }
}

/* ---- the dock, while the page's own buttons are showing -----------------
   Out of the way, and out of the accessibility tree and tab order with it
   (visibility), then back once they scroll off. See the script in contacto. */
.cat-dock{ transition:transform var(--m-move) var(--e-out), visibility 0s linear 0s; }
body.ct-dock-wait .cat-dock{ transform:translateY(100%); visibility:hidden;
  transition:transform var(--m-move) var(--e-out), visibility 0s linear var(--m-move); }
@media (prefers-reduced-motion:reduce){ .cat-dock, body.ct-dock-wait .cat-dock{ transition:none; } }

/* ---- arrival ------------------------------------------------------------
   16px on the system's --m-reveal and --e-out, 60ms apart, once. Armed by
   script, so with JavaScript off nothing is ever left invisible.
   ========================================================================= */
.rise-armed .ct-rise{
  opacity:0; transform:translate3d(0,16px,0);
  transition:opacity var(--m-reveal) var(--e-out), transform var(--m-reveal) var(--e-out);
}
.rise-armed .ct-rise.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rise-armed .ct-rise{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   THE MAP — a picture of it, and the live one on request
   Full bleed between the opening and the caption, as it was. 16:7 on a desk,
   4:3 on a phone. The pin is drawn here, not in the image: the point is the
   image's centre, and a CSS pin stays sharp at any density.
   ======================================================================== */
.ct-where__canvas{
  grid-column:full-start / full-end;
  position:relative; width:100%; aspect-ratio:16/7;
  overflow:clip; background:var(--mc-band);
}
@media (max-width:759.98px){ .ct-where__canvas{ aspect-ratio:4/3; } }
.ct-where__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }

/* A drop: its tip is the point, its body stands above it. Brand blue, a white
   ring so it reads on the pale roads, and one shadow to lift it off the map. */
.ct-pin{
  position:absolute; left:50%; top:50%; width:30px; height:30px;
  translate:-50% -100%;
  background:var(--mc-blue); border:3px solid #FFFFFF;
  border-radius:50% 50% 50% 0; rotate:-45deg; transform-origin:50% 50%;
  box-shadow:0 6px 14px rgba(var(--mc-scrim),.28);
}
.ct-pin{ translate:-50% calc(-100% - 4px); }
.ct-pin::after{ content:""; position:absolute; inset:7px; border-radius:50%; background:#FFFFFF; }

/* The names. Ink on the pale drawing, with a halo of the land colour so a road
   running under a letter does not cut it. */
.ct-place{
  position:absolute; pointer-events:none; white-space:nowrap;
  font-size:var(--t-small); font-weight:600; color:var(--mc-ink);
  text-shadow:0 0 3px #EEF1F6, 0 0 3px #EEF1F6, 0 0 6px #EEF1F6;
}
.ct-place--city{ left:50%; top:50%; translate:22px -130%; font-size:var(--t-ui); font-weight:700; }
.ct-place--air{ left:var(--x); top:var(--y); translate:10px -50%; font-weight:500; color:var(--mc-ink-2); }
.ct-place--air::before{
  content:""; position:absolute; left:-14px; top:50%; width:8px; height:8px; translate:0 -50%;
  border-radius:50%; background:var(--mc-ink-2); box-shadow:0 0 0 2px #EEF1F6;
}
@media (min-width:760px){ .ct-place--air{ left:var(--wx); top:var(--wy); } }

.ct-where__osm{
  position:absolute; left:var(--s-3); bottom:var(--s-2);
  font-size:var(--t-label); color:var(--mc-ink-2);
}

.ct-where__f{
  /* Pulled up so Google's own place card — a white widget top left of every
     embed — is clipped away above the frame; the height grows by the same so the
     bottom edge and Google's attribution stay where the terms want them. */
  position:absolute; left:0; right:0; top:-84px; height:calc(100% + 84px);
  width:100%; border:0; opacity:0; transition:opacity var(--m-state) var(--e-out);
}
.ct-where__canvas.is-live .ct-where__f{ opacity:1; }

/* An embed is live from the frame it loads: a scroll that starts over it is
   eaten by it. So it is built only when asked for. Top right: bottom left is the
   attribution, bottom right Google's fullscreen control once it is live. */
.ct-where__shield{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; align-items:flex-start; justify-content:flex-end;
  padding:var(--s-5); border:0; background:transparent; cursor:pointer;
  font:inherit; color:var(--mc-ink);
}
@media (max-width:759.98px){ .ct-where__shield{ padding:var(--s-3); } }
.ct-where__shield span{
  display:inline-flex; align-items:center; min-height:var(--mc-tap-pref);
  padding:0 var(--s-5); border-radius:var(--mc-r);
  background:var(--mc-surface); box-shadow:var(--mc-shadow-2);
  font-size:var(--t-ui); font-weight:600;
}
.ct-where__shield:focus-visible{ outline:3px solid var(--mc-focus); outline-offset:-6px; }


/* ==========================================================================
   THE WAYS — full-bleed bands, the catalogue's row turned to this page
   Colour clipped in from one side over --m-sweep with a 2px nib (the rows'
   own timings, from catalog.css), alternating sides; the words follow once
   the colour has landed. The three step DOWN in lightness — WhatsApp's own
   dark teal (OKLCH L .43), the site's deep blue (.37), navy (.30) — the
   register of the marque rows, not of buttons. The first set (site green .51
   beside site blue .50: same lightness, hues 112° apart) vibrated at the seam
   and was the loudest thing on the site. White on all three: 7.7, 10.5, 13.6:1.
   ======================================================================== */
.ct-bands{ list-style:none; margin:0; padding:0; }
.ct-band{ position:relative; overflow:hidden; }
.ct-band--wa  { --band:var(--mc-wa-deep); --band-hi:#064A42; --band-mark:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M13.6 2.33A7.94 7.94 0 0 0 8 0a7.9 7.9 0 0 0-6.85 11.9L0 16l4.2-1.1A7.9 7.9 0 0 0 8 15.85 7.92 7.92 0 0 0 13.6 2.33ZM8 14.5a6.6 6.6 0 0 1-3.35-.92l-.24-.14-2.49.65.66-2.43-.16-.25A6.57 6.57 0 1 1 8 14.5Zm3.6-4.92c-.2-.1-1.17-.58-1.35-.64s-.31-.1-.44.1-.51.64-.63.78-.23.15-.43.05a5.4 5.4 0 0 1-1.59-.98 6 6 0 0 1-1.1-1.37c-.11-.2 0-.3.09-.4s.2-.23.3-.35a1.34 1.34 0 0 0 .2-.33.36.36 0 0 0 0-.35c0-.1-.44-1.07-.6-1.46s-.32-.33-.44-.34h-.38a.72.72 0 0 0-.52.25 2.2 2.2 0 0 0-.69 1.64 3.83 3.83 0 0 0 .8 2.03 8.75 8.75 0 0 0 3.35 2.96 11 11 0 0 0 1.12.41 2.68 2.68 0 0 0 1.23.08 2.02 2.02 0 0 0 1.32-.93 1.63 1.63 0 0 0 .11-.93c-.05-.09-.18-.14-.38-.24Z%27/%3E%3C/svg%3E"); }
.ct-band--tel { --band:var(--mc-blue-dark); --band-hi:#07336A; --band-mark:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z%27/%3E%3C/svg%3E"); }
.ct-band--mail{ --band:var(--mc-navy); --band-hi:var(--mc-deep); --band-mark:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill-rule=%27evenodd%27 d=%27M12 2a10 10 0 1 0 5.3 18.5l-.9-1.7A8 8 0 1 1 20 12v1.2a1.8 1.8 0 0 1-3.6 0V7h-2v.9A5 5 0 1 0 15 16a3.8 3.8 0 0 0 7-2.8V12A10 10 0 0 0 12 2zm0 7a3 3 0 1 1 0 6 3 3 0 0 1 0-6z%27/%3E%3C/svg%3E"); }

.ct-band__a{ position:relative; display:block; color:#FFFFFF; text-decoration:none; }
.ct-band__fill{ position:absolute; inset:0; background:var(--band); transition:background var(--m-state) var(--e-out); }
.ct-band__fill::after{ content:""; position:absolute; top:0; bottom:0; right:0; width:2px; background:#FFFFFF; opacity:0; }
.ct-band--rtl .ct-band__fill::after{ right:auto; left:0; }
.ct-band__a:hover .ct-band__fill{ background:var(--band-hi); }

/* the app's mark where a marque's badge sits in its row: huge, 7% white, off the edge */
.ct-band__mark{
  position:absolute; top:50%; right:-3rem; width:clamp(11rem, 26vw, 22rem); aspect-ratio:1; translate:0 -50%;
  background:rgba(255,255,255,.08);
  -webkit-mask:var(--band-mark) center/contain no-repeat; mask:var(--band-mark) center/contain no-repeat;
  transition:translate var(--m-move) var(--e-out), background var(--m-state) var(--e-out);
}
.ct-band--rtl .ct-band__mark{ right:auto; left:-3rem; }
.ct-band__a:hover .ct-band__mark{ translate:-12px -50%; background:rgba(255,255,255,.12); }
.ct-band--rtl .ct-band__a:hover .ct-band__mark{ translate:12px -50%; }

.ct-band__in{
  position:relative; display:grid; align-items:baseline;
  grid-template-columns:minmax(0,1fr); gap:var(--s-2);
  padding-block:var(--s-6);
}
@media (min-width:900px){
  .ct-band__in{ grid-template-columns:9rem minmax(0,1fr) auto; column-gap:var(--s-7); padding-block:var(--s-7); }
  .ct-band__k{ grid-row:1 / span 2; }
  .ct-band__n{ grid-column:2; }
  .ct-band__go{ grid-column:3; grid-row:1 / span 2; align-self:center; }
  .ct-band--rtl .ct-band__in{ grid-template-columns:auto minmax(0,1fr) 9rem; }
  .ct-band--rtl .ct-band__k{ grid-column:3; text-align:right; }
  .ct-band--rtl .ct-band__v, .ct-band--rtl .ct-band__n{ grid-column:2; text-align:right; justify-self:end; }
  .ct-band--rtl .ct-band__go{ grid-column:1; }
}
.ct-band__k{ font-size:var(--t-small); font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.9); }
.ct-band__v{
  font-size:var(--t-h1); font-weight:700; letter-spacing:-.03em; line-height:1.02;
  text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:rgba(255,255,255,.35);
  text-underline-offset:.14em; transition:text-decoration-color var(--m-quick) var(--e-out);
}
.ct-band__v--mail{ font-size:var(--t-h2); overflow-wrap:anywhere; }
.ct-band__a:hover .ct-band__v{ text-decoration-color:#FFFFFF; text-decoration-thickness:2px; }
.ct-band__n{ max-width:52ch; font-size:var(--t-small); line-height:1.5; color:rgba(255,255,255,.92); }
.ct-band__go{
  display:inline-flex; align-items:center; min-height:var(--mc-tap-pref); padding:0 var(--s-5);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--mc-r);
  font-size:var(--t-ui); font-weight:600; white-space:nowrap;
  transition:background var(--m-quick) var(--e-out), color var(--m-quick) var(--e-out);
}
.ct-band__a:hover .ct-band__go{ background:#FFFFFF; color:var(--band); }
.ct-band__a:focus-visible{ outline:3px solid #FFFFFF; outline-offset:-6px; }

/* phone: the three bands are the first screen — compact, the whole band the target */
@media (max-width:899.98px){
  .ct-band__in{ padding-block:var(--s-5); grid-template-columns:minmax(0,1fr) auto; column-gap:var(--s-4); }
  .ct-band__k{ grid-column:1; }
  .ct-band__v{ grid-column:1; font-size:var(--t-h2); }
  .ct-band__v--mail{ font-size:var(--t-km); }
  .ct-band__n{ grid-column:1; }
  .ct-band__go{ display:none; }   /* the band is the button; a second button inside it is noise */
  .ct-band__a::after{
    content:""; position:absolute; right:var(--mc-gutter-m); top:50%; width:22px; height:22px; translate:0 -50%;
    border-top:2px solid #FFFFFF; border-right:2px solid #FFFFFF; rotate:45deg; scale:.6; opacity:.9;
  }
  .ct-band__in{ padding-right:calc(var(--mc-gutter-m) + 2.5rem); }
  .ct-band__mark{ width:9rem; right:-1.5rem; }
  .ct-band--rtl .ct-band__mark{ left:auto; right:-1.5rem; }
}

/* ---- the stroke ------------------------------------------------------- */
.bands-armed .ct-band__fill{ clip-path:inset(0 100% 0 0); }
.bands-armed .ct-band--rtl .ct-band__fill{ clip-path:inset(0 0 0 100%); }
.bands-armed .ct-band__in, .bands-armed .ct-band__mark{ opacity:0; }
.bands-armed .ct-band__in{ translate:-16px 0; }
.bands-armed .ct-band--rtl .ct-band__in{ translate:16px 0; }
.bands-armed .ct-band.is-live .ct-band__fill{ clip-path:inset(0); transition:clip-path var(--m-sweep) var(--e-inout), background var(--m-state) var(--e-out); }
.bands-armed .ct-band.is-live .ct-band__fill::after{ animation:ct-nib var(--m-sweep) linear both; }
@keyframes ct-nib{ 0%,85%{ opacity:.55; } 100%{ opacity:0; } }
.bands-armed .ct-band.is-live .ct-band__in{ opacity:1; translate:0 0;
  transition:opacity var(--m-move) var(--e-out) var(--m-sweep), translate var(--m-move) var(--e-out) var(--m-sweep); }
.bands-armed .ct-band.is-live .ct-band__mark{ opacity:1; transition:opacity var(--m-reveal) var(--e-out) calc(var(--m-sweep) - 100ms), translate var(--m-move) var(--e-out), background var(--m-state) var(--e-out); }
@media (prefers-reduced-motion:reduce){
  .bands-armed .ct-band__fill{ clip-path:none !important; }
  .bands-armed .ct-band__in, .bands-armed .ct-band__mark{ opacity:1; translate:none; }
}

/* the opening is only the statement now: its column carries a line, not the ways */
.ct-open__lede{ margin:var(--s-6) 0 0; max-width:34ch; font-size:var(--t-km); line-height:1.3; color:var(--mc-ink-2); }
/* On a phone the three bands follow the statement directly: the photograph
   would push the first of them to y 724. It belongs to the desk's two columns. */
@media (max-width:899.98px){
  .ct-open__pic{ display:none; }
  .ct-open__ways-wrap{ padding-block:0 var(--s-6); }
  .ct-open__lede{ margin-top:var(--s-3); font-size:var(--t-prose); }
}

/* ---- phone pass, 2026-09-23 ------------------------------------------------ */
@media (max-width:768px), (max-height:520px) and (orientation:landscape){
  /* The page ends on the navy band and the footer carries its own clearance for
     the dock (foot.css); main's clearance on top of it was a 90px strip of page
     ground between two dark fields. /inicio does the same. */
  body:has(.cat-dock) main.ct{ padding-bottom:0; }
}
@media (max-width:759.98px){
  /* "Abrir en Google Maps" ended a section with ~150px of nothing before the form */
  .ct-where__say{ padding-block:var(--s-6) 0; }
  .ct-write{ padding-block:var(--s-6) var(--s-7); margin-top:var(--s-4); border-top:1px solid var(--mc-hairline); }
  .ct-where__say .ct-h2{ font-size:var(--t-h3); }        /* the map above has just said "Málaga" */
  .ct-far .ct-note{ margin-top:var(--s-6); }
}