/* ==========================================================================
   LANDEREZ — home.css
   ========================================================================== */

/* ---------- HERO: el nombre se convierte en marca ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: calc(var(--header-h) + clamp(1.5rem, 4vh, 3rem));
  padding-bottom: clamp(1rem, 2.5vh, 1.75rem);
  overflow: hidden;
}
.hero__top {
  position: relative; z-index: 2; flex: 1;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter);
  align-content: start; padding-bottom: clamp(1.25rem, 3vh, 2rem);
}
.hero__intro { grid-column: 1 / span 4; display: grid; gap: 1.5rem; }
.hero__intro p { font-size: var(--fs-lead); line-height: 1.4; color: var(--cream-2); max-width: 30ch; }
.hero__intro p strong { color: var(--cream); font-weight: 450; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; animation: fade-in 0.9s var(--ease) 0.4s backwards; }

.hero__photo {
  position: absolute; z-index: 1;
  right: clamp(0rem, 6vw, 8rem);
  bottom: calc(var(--word-size) * 0.52);
  height: min(74svh, 58vw);
  aspect-ratio: 1000 / 1109;
  pointer-events: none;
}
.hero__photo img {
  width: 100%; height: 100%; object-fit: contain; object-position: bottom center;
  filter: contrast(1.04);
}
.hero__photo-frame {
  position: absolute; inset: 8% auto auto -6%; width: 20%; aspect-ratio: 1;
  border-top: 1.5px solid var(--red-hot); border-left: 1.5px solid var(--red-hot);
}

.hero__word-wrap {
  position: relative; z-index: 3;
  margin-top: auto;
  container-type: inline-size;
}
.hero { --word-size: min(calc((100vw - 2 * var(--gutter)) / 5.02), calc(var(--max) / 5.02)); }

#hero-title { position: relative; }
.hero-word {
  display: flex; align-items: flex-end;
  font-family: var(--f-display); font-weight: 600;
  font-size: var(--word-size);
  font-size: calc(100cqw / 5.25);
  line-height: 0.8; letter-spacing: -0.035em;
  white-space: nowrap;
  transform-origin: 0 100%;
  animation: hw-grow 1.1s var(--ease-io) 2.55s backwards;
}
/* Entrada con desenfoque (estilo «blur text»): cada letra cae desde arriba
   desenfocada, pasa por un punto medio con medio blur y un pequeño rebote, y
   se asienta nítida. Después llega la transición a LANDEREZ. */
.hw { display: inline-block; position: relative; animation: hw-rise 1.15s cubic-bezier(0.25, 0.6, 0.3, 1) backwards; animation-delay: calc(0.15s + var(--i) * 0.11s); }
/* Letras que sobran: contenedor que colapsa + letra interior que sube */
.hw-cut {
  display: inline-block; max-width: 0; opacity: 0; color: var(--red-hot);
  overflow: visible; /* sin recorte durante la entrada: no corta el desenfoque */
  animation: hw-cut 1s var(--ease-io) 2.55s backwards;
}
.hw-cut--space { width: 0.28em; }
.hw__acc {
  position: absolute; left: 44%; top: -0.2em;
  width: 0.2em; height: 0.075em; background: currentColor;
  transform: rotate(-32deg); opacity: 0;
  animation: hw-acc 0.9s var(--ease-io) 2.5s backwards;
}
.hw--r { color: var(--red-hot); }

@keyframes hw-rise {
  0%   { opacity: 0;   transform: translateY(-0.45em); filter: blur(12px); }
  55%  { opacity: 0.5; transform: translateY(0.05em);  filter: blur(5px); }
  100% { opacity: 1;   transform: none;               filter: blur(0); }
}
@keyframes hw-cut {
  /* el recorte horizontal (clip-path) solo actúa mientras la letra se encoge,
     cuando ya está nítida; durante la espera previa no recorta nada */
  0% { max-width: 1em; opacity: 1; color: var(--cream); clip-path: inset(-1em -1em); }
  1% { clip-path: inset(-1em 0); }
  25% { max-width: 1em; opacity: 1; color: var(--red-hot); clip-path: inset(-1em 0); }
  100% { max-width: 0; opacity: 0; color: var(--red-hot); clip-path: inset(-1em 0); }
}
@keyframes hw-acc {
  0%, 20% { opacity: 1; transform: rotate(-32deg); }
  100% { opacity: 0; transform: translate(0.6em, -0.8em) rotate(-32deg); }
}
@keyframes hw-grow { from { transform: scale(0.7); } }

.hero__first {
  display: block;
  font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--cream-2); margin-bottom: 0.9rem;
  animation: fade-in 0.8s var(--ease) 0.1s backwards;
}

.hero__meta {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter);
  margin-top: clamp(1rem, 2vh, 1.5rem); padding-top: 1rem; border-top: 1px solid var(--line);
  animation: fade-in 1s var(--ease) 3.3s backwards;
}
.hero__meta > * { grid-column: span 3; color: var(--cream-2); }
.hero__meta strong { color: var(--cream); font-weight: 500; }
.hero__meta .scroll-cue { grid-column: 10 / span 3; justify-self: end; display: inline-flex; align-items: center; gap: 0.75rem; }
.scroll-cue__bar { width: 1px; height: 28px; background: var(--line-2); position: relative; overflow: hidden; }
.scroll-cue__bar::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--red-hot);
  animation: scroll-cue 2.2s var(--ease-io) infinite;
}
@keyframes scroll-cue { from { transform: translateY(-100%); } to { transform: translateY(260%); } }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red-hot); margin-right: 0.5em; box-shadow: 0 0 0 0 rgba(240, 58, 82, 0.5); animation: live 2.4s infinite; vertical-align: 1px; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(240, 58, 82, 0.5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(240, 58, 82, 0); } }

/* Visitas repetidas en la misma sesión: sin animación de entrada */
.hero-seen .hero-word, .hero-seen .hw, .hero-seen .hw-cut, .hero-seen .hw__acc,
.hero-seen .hero__first, .hero-seen .hero__meta, .hero-seen .hero__cta { animation: none; }

/* ---------- PERFIL ---------- */
.profile__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.profile__label { grid-column: 1 / span 3; }
.profile__statement { grid-column: 4 / span 9; font-size: clamp(1.9rem, 0.8rem + 3.2vw, 4.25rem); font-weight: 400; line-height: 1.02; }
.profile__statement em { font-style: normal; color: var(--red-hot); }
.profile__body { grid-column: 4 / span 4; margin-top: clamp(2.5rem, 5vw, 4.5rem); display: grid; gap: 1.25rem; align-content: start; color: var(--cream-2); }
.profile__body p:first-child { color: var(--cream); }
.profile__skills { grid-column: 9 / span 4; margin-top: clamp(2.5rem, 5vw, 4.5rem); display: grid; gap: 2.25rem; }
.skills__title { margin-bottom: 1rem; }
.skills__list li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: 0.7rem; border-bottom: 1px solid var(--line);
  transition: color 0.3s;
}
.skills__list li > span:first-child { transition: translate 0.4s var(--ease); }
.skills__list li:hover { color: var(--cream); }
.skills__list li:hover > span:first-child { translate: 0.5rem 0; }
.skills__list li span:last-child { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--cream-3); }
.skills__list--soft li { color: var(--cream-2); }

/* Trayectoria: timeline editorial */
.timeline { margin-top: clamp(5rem, 10vw, 9rem); }
.timeline__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.5rem; }
.tl-row {
  position: relative;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter);
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.tl-row:last-child { border-bottom: 1px solid var(--line); }
.tl-row::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--red-hot); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease);
}
.tl-row.is-in::before { transform: scaleX(1); }
.tl-row__mark {
  grid-column: 1 / span 5;
  font-family: var(--f-display); font-weight: 600; font-size: clamp(3.5rem, 2rem + 7vw, 9.5rem);
  line-height: 0.8; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px var(--cream-3);
  background: linear-gradient(90deg, var(--cream) 50%, transparent 50%) 100% 0 / 200% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  transition: background-position 1.4s var(--ease) 0.2s, -webkit-text-stroke-color 0.6s;
}
.tl-row.is-in .tl-row__mark { background-position: 0 0; -webkit-text-stroke-color: transparent; }
.tl-row--current .tl-row__mark { background-image: linear-gradient(90deg, var(--red-hot) 50%, transparent 50%); }
.tl-row__mark small { font-size: 0.28em; letter-spacing: 0; -webkit-text-stroke: 0; color: var(--cream-2); vertical-align: top; margin-left: 0.2em; }
.tl-row__main { grid-column: 6 / span 4; display: grid; gap: 0.4rem; align-content: start; padding-top: 0.4rem; }
.tl-row__main h4 { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.05; }
.tl-row__main p { color: var(--cream-2); }
.tl-row__side { grid-column: 10 / span 3; display: grid; gap: 0.6rem; align-content: start; justify-items: start; padding-top: 0.6rem; color: var(--cream-2); }

/* ---------- PILARES ---------- */
.pillars__list { border-bottom: 1px solid var(--line); }
.pillar {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: center;
  padding-block: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.pillar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(170, 9, 36, 0.28), rgba(170, 9, 36, 0.04) 60%, transparent);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 0.9s var(--ease);
}
.pillar:hover::before { clip-path: polygon(0 0, 100% 0, calc(100% - 6rem) 100%, 0 100%); }
.pillar__num {
  grid-column: 1 / span 2;
  font-family: var(--f-display); font-weight: 500; font-size: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--cream-3);
  transition: color 0.5s var(--ease), -webkit-text-stroke-color 0.5s;
}
.pillar:hover .pillar__num { color: var(--red-hot); -webkit-text-stroke-color: var(--red-hot); }
.pillar__icon { grid-column: 3 / span 1; width: clamp(40px, 4vw, 60px); color: var(--red-hot); }
.pillar__icon path, .pillar__icon line, .pillar__icon polyline, .pillar__icon rect {
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.pillar:hover .pillar__icon [pathLength] { animation: draw 1.1s var(--ease) both; }
.pillar__icon [pathLength]:nth-child(2) { animation-delay: 0.1s !important; }
.pillar__icon [pathLength]:nth-child(3) { animation-delay: 0.2s !important; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.pillar__title {
  grid-column: 4 / span 5;
  font-family: var(--f-display); font-weight: 500; font-size: clamp(1.75rem, 1rem + 2.6vw, 3.5rem); line-height: 1; letter-spacing: -0.02em;
  transition: transform 0.7s var(--ease);
}
.pillar__title span { display: block; }
.pillar__title span + span { color: var(--cream-2); font-weight: 300; }
.pillar:hover .pillar__title { transform: translateX(0.6rem); }
.pillar__text { grid-column: 9 / span 4; color: var(--cream-2); max-width: 36ch; }

/* ---------- CARRUSEL DE PROYECTOS ---------- */
.works { padding-bottom: clamp(4rem, 6vw, 6rem); }
.works__head h2 { font-size: inherit; }
.works__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }

.carousel {
  position: relative;
  overflow: hidden;
  padding-block: 1rem 3.5rem;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; /* sin menú de pulsación larga (iOS): no cancela el arrastre */
  cursor: grab;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.carousel.is-dragging { cursor: grabbing; }
/* Mientras se arrastra, las tarjetas no reaccionan al hover: el zoom y los
   filtros de cada imagen saturaban el navegador y cortaban la inercia */
.carousel.is-dragging .pcard__link { pointer-events: none; }
.carousel__track { display: flex; gap: clamp(1rem, 2vw, 2rem); width: max-content; will-change: transform; }
.pcard {
  flex: none; width: clamp(250px, 27vw, 430px);
  transform: skewX(var(--skew, 0deg));
  transform-origin: 50% 100%;
}
.pcard__link { display: block; -webkit-user-drag: none; }
.pcard__media {
  position: relative; overflow: hidden; aspect-ratio: 5 / 4; background: var(--ink-2);
  border-radius: var(--radius); isolation: isolate;
}
.pcard__media img {
  width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none;
  transform: scale(1.02); transition: transform 1.1s var(--ease), filter 0.6s;
  filter: saturate(0.9);
}
.pcard__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(170, 9, 36, 0.55), transparent 55%);
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.pcard__corner {
  position: absolute; right: 12px; bottom: 12px; z-index: 1; width: 22px; height: 22px;
  border-right: 1.5px solid var(--cream); border-bottom: 1.5px solid var(--cream);
  opacity: 0; transform: translate(-8px, -8px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
/* Hover solo con ratón: en pantallas táctiles no aporta y entorpecía el arrastre */
@media (hover: hover) and (pointer: fine) {
  .pcard__link:hover .pcard__media img { transform: scale(1.07); filter: saturate(1.05); }
  .pcard__link:hover .pcard__media::after { opacity: 1; }
  .pcard__link:hover .pcard__corner { opacity: 1; transform: none; }
}
.pcard__link:focus-visible .pcard__media img { transform: scale(1.07); filter: saturate(1.05); }
.pcard__link:focus-visible .pcard__media::after { opacity: 1; }
.pcard__link:focus-visible .pcard__corner { opacity: 1; transform: none; }
.pcard__info { display: grid; grid-template-columns: auto 1fr auto; gap: 0.25rem 1rem; align-items: baseline; padding-top: 1rem; }
.pcard__num { color: var(--red-hot); }
.pcard__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); line-height: 1.05; letter-spacing: -0.01em; }
.pcard__cat { grid-column: 2; color: var(--cream-3); }
.pcard__arrow { grid-row: 1; grid-column: 3; color: var(--cream-2); }

.carousel__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-top: 1.25rem; border-top: 1px solid var(--line);
}
.carousel__hint { color: var(--cream-3); display: inline-flex; gap: 0.75rem; align-items: center; }
.carousel__hint svg { width: 34px; color: var(--red-hot); }
.carousel__toggle { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--cream-2); padding: 0.5rem 0; }
.carousel__toggle:hover { color: var(--cream); }
.carousel__toggle .state { width: 8px; height: 8px; background: var(--red-hot); border-radius: 50%; }
.carousel__toggle[aria-pressed="true"] .state { background: transparent; border: 1px solid var(--cream-2); border-radius: 0; }

/* ---------- MARCAS ---------- */
.brands { padding-top: clamp(4rem, 7vw, 7rem); overflow: hidden; }
.brands__head { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.brands__title { grid-column: 1 / span 8; font-size: clamp(2rem, 1.2rem + 3vw, 4.25rem); }
.brands__note { grid-column: 9 / span 4; color: var(--cream-2); max-width: 32ch; justify-self: end; }

.wall {
  position: relative; pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  border-block: 1px solid var(--line);
}
.wall__row { display: flex; width: max-content; animation: wall-move var(--dur, 52s) linear infinite; }
.wall__row + .wall__row { border-top: 1px solid var(--line); }
.wall__row--b { --dur: 66s; animation-delay: -20s; }
.wall__cell {
  position: relative; flex: none;
  width: max(170px, 15vw); height: clamp(104px, 8vw, 140px);
  display: grid; place-items: center;
  border-right: 1px solid var(--line);
}
.wall__cell img {
  height: calc(var(--h) * var(--k, 1.28)); width: auto; max-width: 86%; object-fit: contain;
  animation: breathe var(--b, 10s) var(--ease-io) infinite alternate;
  animation-delay: var(--bd, 0s);
}
.wall__cell i {
  position: absolute; left: 0.75rem; top: 0.6rem;
  font-style: normal; font-family: var(--f-mono); font-size: 0.5625rem; letter-spacing: 0.1em; color: var(--cream-3); opacity: 0.6;
}

@keyframes wall-move { to { transform: translateX(-50%); } }
@keyframes breathe {
  0% { opacity: 0.18; filter: blur(3px); transform: scale(0.97); }
  45% { opacity: 0.92; filter: blur(0); transform: none; }
  100% { opacity: 0.55; filter: blur(0.5px); }
}

/* ---------- TESTIMONIOS ---------- */
.quotes__list { counter-reset: q; }
.quote {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line);
}
.quote:last-child { border-bottom: 1px solid var(--line); }
.quote__meta { grid-column: 1 / span 3; display: grid; gap: 1rem; align-content: start; }
.quote__rating { display: grid; justify-items: start; gap: 0.5rem; color: var(--cream-3); }
.quote__body { grid-column: 4 / span 9; position: relative; }
.quote__mark {
  position: absolute; left: -0.08em; top: -0.35em;
  font-family: var(--f-display); font-weight: 600; font-size: clamp(5rem, 9vw, 9rem); line-height: 1; color: var(--red); opacity: 0.9;
  transform: translateX(-110%);
}
.quote blockquote p {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.5rem); line-height: 1.26; letter-spacing: -0.01em;
  max-width: 34ch; text-wrap: pretty;
}
.quote blockquote em { font-style: normal; color: var(--red-hot); font-weight: 400; }
.quote figcaption { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem; }
.quote__name { font-weight: 500; }
.quote__role { color: var(--cream-2); font-size: var(--fs-small); }

/* ---------- CONTACTO ---------- */
.contact { padding-bottom: clamp(5rem, 8vw, 8rem); }
.contact__title {
  font-size: clamp(2.6rem, 1rem + 6.4vw, 8.5rem); line-height: 0.92; letter-spacing: -0.035em; font-weight: 500;
  margin-bottom: clamp(3.5rem, 7vw, 7rem);
}
.contact__title .accent { font-weight: 400; }
.contact__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.contact__form { grid-column: 1 / span 7; display: grid; gap: 2.25rem; }
.contact__direct { grid-column: 9 / span 4; display: grid; gap: 2.5rem; align-content: start; }

.field { position: relative; display: grid; }
.field input, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-2);
  padding: 1.6rem 0 0.8rem; font-size: var(--fs-lead); color: var(--cream); border-radius: 0;
  outline: none; resize: vertical;
}
.field textarea { min-height: 9rem; line-height: 1.45; }
.field label {
  position: absolute; left: 0; top: 1.6rem; pointer-events: none;
  font-size: var(--fs-lead); color: var(--cream-3);
  transform-origin: 0 0; transition: transform 0.45s var(--ease), color 0.3s;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
  transform: translateY(-1.45rem) scale(0.62); color: var(--cream-2);
}
.field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--red-hot);
  transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease);
}
.field:focus-within::after { transform: scaleX(1); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; }
.field__num { position: absolute; right: 0; top: 1.9rem; color: var(--cream-3); }
.field.has-error::after { transform: scaleX(1); background: var(--red-hot); }
.field__error { color: var(--red-hot); font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 0.06em; margin-top: 0.5rem; min-height: 1em; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
.form-foot small { color: var(--cream-3); max-width: 36ch; font-size: var(--fs-small); }
.form-status { min-height: 1.5em; font-family: var(--f-mono); font-size: var(--fs-small); letter-spacing: 0.04em; }
.form-status.is-ok { color: var(--cream); }
.form-status.is-ok::before { content: "✓ "; color: var(--red-hot); }
.form-status.is-error { color: var(--red-hot); }
.form-status a { text-decoration: underline; }
.btn[disabled] { opacity: 0.6; pointer-events: none; }

/* WhatsApp: tarjeta verde, reconocible al instante */
.wa {
  --wa: #25d366; --wa-mid: #128c4a; --wa-deep: #075e3a;
  display: block; align-self: start; padding: 1.6rem 1.6rem 1.75rem; position: relative; isolation: isolate; overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(140deg, var(--wa-mid) 0%, var(--wa-deep) 100%);
  box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.35), 0 20px 50px -20px rgba(37, 211, 102, 0.45);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.wa::before {
  content: ""; position: absolute; z-index: -1; right: -30%; top: -60%; width: 90%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(37, 211, 102, 0.55), transparent 70%);
  transition: transform 0.9s var(--ease);
}
.wa:hover, .wa:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.7), 0 28px 60px -18px rgba(37, 211, 102, 0.65); }
.wa:hover::before { transform: translate(-12%, 18%) scale(1.15); }
.wa__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.wa__q { color: rgba(239, 238, 228, 0.85); }
.wa__status { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--cream); background: rgba(7, 94, 58, 0.55); padding: 0.35rem 0.6rem; border-radius: 999px; }
.wa__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); animation: wa-pulse 2.2s infinite; }
@keyframes wa-pulse { 70%, 100% { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); } }
.wa__cta {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem;
  margin-top: 1.5rem; color: var(--cream);
  font-family: var(--f-display); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1;
}
.wa__logo { width: 1.5em; height: 1.5em; fill: var(--cream); flex: none; }
.wa__cta .arrow { font-size: 0.8em; }

/* Canales con icono */
.channels { display: grid; }
.channel {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 1rem; align-items: center;
  padding-block: 0.9rem; border-bottom: 1px solid var(--line);
  /* el desplazamiento al pasar el cursor va por transform (no mueve el layout) */
}
.channel:first-child { border-top: 1px solid var(--line); }
.channel__icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 12px; color: var(--cream);
  transition: background-color 0.4s var(--ease), border-color 0.4s, color 0.4s;
}
.channel__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ico { display: block; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ico--ig { --m: url("../assets/brand/icon-instagram.png"); }
.ico--li { --m: url("../assets/brand/icon-linkedin.png"); }
.channel__text { display: grid; gap: 0.2rem; min-width: 0; }
.channel .mono { color: var(--cream-3); }
.channel__value { overflow-wrap: anywhere; font-size: var(--fs-body); }
.channel .arrow { color: var(--cream-3); }
.channel > :not(.arrow) { transition: translate 0.4s var(--ease); }
a.channel:hover > :not(.arrow) { translate: 0.4rem 0; }
a.channel:hover .channel__icon { background: var(--red); border-color: var(--red); }
a.channel:hover .channel__value, a.channel:hover .arrow { color: var(--red-hot); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero__intro { grid-column: 1 / span 6; }
  .hero__photo { right: 0; height: min(60svh, 64vw); }

  .profile__label { grid-column: 1 / -1; }
  .profile__statement { grid-column: 1 / -1; }
  .profile__body { grid-column: 1 / span 6; }
  .profile__skills { grid-column: 7 / span 6; }
  .tl-row__mark { grid-column: 1 / -1; }
  .tl-row__main { grid-column: 1 / span 7; }
  .tl-row__side { grid-column: 8 / span 5; }
  .pillar__num { grid-column: 1 / span 2; }
  .pillar__icon { grid-column: 3 / span 2; }
  .pillar__title { grid-column: 5 / span 8; }
  .pillar__text { grid-column: 5 / span 8; }
  .brands__title, .brands__note { grid-column: 1 / -1; justify-self: start; }
  .quote__meta { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; }
  .quote__body { grid-column: 1 / -1; }
  .quote__mark { position: static; transform: none; display: block; height: 0.5em; margin-bottom: 0.2em; }
  .contact__form { grid-column: 1 / -1; }
  .contact__direct { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  /* Composición móvil propia: foto arriba, palabra en el centro de gravedad */
  .hero { padding-top: calc(var(--header-h) + 0.75rem); min-height: 100svh; }
  .hero__top { grid-template-columns: 1fr; flex: none; }
  .hero__intro { grid-column: 1; gap: 1rem; }
  .hero__intro p { font-size: 1rem; max-width: 34ch; }
  .hero__cta { gap: 0.6rem; }
  .hero__top { padding-bottom: 0.5rem; }
  .hero__cv { padding-block: 0.35rem; }
  .hero__photo {
    position: relative; right: auto; bottom: auto;
    width: 82vw; height: auto; margin: auto -2vw -16vw auto; padding-top: 0.75rem;
  }
  .hero__photo-frame { inset: 6% auto auto -4%; }
  .hero__word-wrap { margin-top: 0.5rem; }
  .hero__first { margin-bottom: 0.6rem; }
  .hero__meta { grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
  .hero__meta > * { grid-column: span 1; }
  .hero__meta .scroll-cue { display: none; }

  .profile__body, .profile__skills { grid-column: 1 / -1; }
  .profile__skills { margin-top: 1rem; }
  .tl-row__main, .tl-row__side { grid-column: 1 / -1; }
  .tl-row__side { padding-top: 0; }

  .pillar { grid-template-columns: auto 1fr; gap: 1rem 1.25rem; align-items: start; }
  .pillar__num { grid-column: 1; grid-row: 1; font-size: 2.25rem; }
  .pillar__icon { grid-column: 2; grid-row: 1; justify-self: end; width: 36px; }
  .pillar__title, .pillar__text { grid-column: 1 / -1; }
  .pillar::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 0; transition: opacity 0.6s; }
  .pillar.is-in::before { opacity: 0.6; }

  .pcard { width: 74vw; }
  .carousel { mask-image: none; }
  .carousel__hint span { display: none; }

  .wall__cell { width: 150px; height: 100px; }
  .wall__cell img { --k: 0.78; }

  .quote__meta { grid-auto-flow: row; }
  .contact__direct { grid-template-columns: 1fr; }
  .form-foot { flex-direction: column; align-items: stretch; }
  .form-foot .btn { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-word, .hw, .hw-cut, .hw__acc { animation-duration: 0.01s !important; animation-delay: 0s !important; }
  .wall__row { animation-duration: 240s; }
  .wall__cell img { animation: none; opacity: 0.7; }
  .scroll-cue__bar::after, .live-dot, .hero__cta { animation: none; }
}
.quotes__note { margin-top: 1.25rem; color: var(--cream-3); }

/* ---------- Perfil: GIF de marca ---------- */
.profile__gif {
  grid-column: 1 / span 3; align-self: start;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius);
  background: var(--ink-2);
}
.profile__gif img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* ---------- Trayectoria: detalles ---------- */
.tl-row__main p + p { margin-top: -0.1rem; }
.tl-dates { color: var(--cream-3); margin-left: 0.5rem; white-space: nowrap; }
.tl-place { color: var(--cream-3); }

@media (max-width: 1024px) {
  .profile__gif { grid-column: 1 / span 4; }
  .profile__body { grid-column: 5 / -1; }
  .profile__skills { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
}
@media (max-width: 760px) {
  .profile__gif { grid-column: 1 / -1; width: 72%; margin-top: 2.5rem; }
  .profile__body { grid-column: 1 / -1; margin-top: 1.5rem; }
  .profile__skills { grid-template-columns: 1fr; }
}

/* ---------- Ajustes de composición (GIF más grande, títulos en móvil) ---------- */
.profile__gif { grid-column: 1 / span 4; }
.profile__body { grid-column: 5 / span 4; }
.br-m { display: none; }

@media (max-width: 1024px) {
  .profile__gif { grid-column: 1 / span 5; }
  .profile__body { grid-column: 6 / -1; }
}
@media (max-width: 760px) {
  .profile__gif { grid-column: 1 / -1; width: 86%; justify-self: center; margin-inline: auto; }
  .profile__body { grid-column: 1 / -1; }
  /* cortes de línea pensados para móvil */
  .br-m { display: inline; }
  .profile__statement .line-mask:nth-child(-n + 2) { display: inline; }
  .profile__statement .line-mask:nth-child(2)::after { content: ""; display: block; }
  /* los degradados de los pilares se fugan por la izquierda de la pantalla */
  .pillar { overflow: visible; }
  .pillar::before { left: calc(var(--gutter) * -1); }
}
@media (max-width: 760px) {
  .profile__statement .line-mask:nth-child(-n + 2) > span { display: inline; }
}

/* Evita el menú de mantener pulsado de iOS sobre las tarjetas (cortaba el arrastre) */
.pcard__link, .pcard__media, .pcard__media img { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }

/* ---------- Reconocimientos ---------- */
.awards { margin-top: clamp(4.5rem, 9vw, 8rem); }
.awards__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 2rem; margin-bottom: 1.5rem; }
.awards__lead { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-lead); color: var(--cream-2); }
.awards__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: start; }

/* Recuadro multimedia */
.awards__media {
  grid-column: 1 / span 4; position: relative; aspect-ratio: 1;
  border-radius: var(--radius); overflow: hidden; isolation: isolate;
  background: var(--ink-2); border: 1px solid var(--line);
}
.awards__slide {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transform: scale(1.04);
  transition: opacity 0.6s var(--ease), transform 1s var(--ease);
}
.awards__slide.is-active { opacity: 1; transform: none; }
.awards__slide > img, .awards__reel > img { width: 100%; height: 100%; object-fit: cover; }
.awards__frame { display: grid; place-items: center; background: linear-gradient(140deg, var(--red) 0%, var(--red-deep) 100%); }
.awards__frame .awards__logo { width: 46%; height: auto; }
.awards__slide--idle {
  align-content: center; gap: 1.25rem;
  background: radial-gradient(70% 70% at 50% 40%, rgba(170, 9, 36, 0.22), transparent 70%);
}
.awards__iso {
  width: 26%; aspect-ratio: 256 / 250; background: var(--cream); opacity: 0.9;
  -webkit-mask: url("../assets/brand/isotipo.png") center / contain no-repeat;
  mask: url("../assets/brand/isotipo.png") center / contain no-repeat;
}
.awards__hint { color: var(--cream-3); text-align: center; padding-inline: 1rem; }
.awards__slide--placeholder { background: linear-gradient(140deg, var(--red) 0%, var(--red-deep) 100%); }
.awards__slide--placeholder .awards__logo { width: 46%; height: auto; object-fit: contain; }
.awards__tag {
  position: absolute; left: 0.75rem; bottom: 0.75rem; z-index: 2;
  font-size: 0.5625rem; color: var(--cream); background: rgba(10, 11, 14, 0.7);
  padding: 0.3rem 0.55rem; border-radius: 999px;
  opacity: 0; transition: opacity 0.4s;
}
.awards__media.has-active .awards__tag { opacity: 1; }

/* Carrete provisional: fotos que se suceden mientras el premio está activo */
.awards__reel { position: absolute; inset: 0; }
.awards__reel > * { position: absolute; inset: 0; opacity: 0; animation: reel 6s linear infinite; animation-play-state: paused; }
.awards__reel > :nth-child(2) { animation-delay: 1.5s; }
.awards__reel > :nth-child(3) { animation-delay: 3s; }
.awards__reel > :nth-child(4) { animation-delay: 4.5s; }
.awards__slide.is-active .awards__reel > * { animation-play-state: running; }
@keyframes reel { 0% { opacity: 0; } 4%, 25% { opacity: 1; } 30%, 100% { opacity: 0; } }

/* Lista */
.awards__list { grid-column: 6 / -1; display: grid; }
.award {
  position: relative; display: grid; grid-template-columns: clamp(2.6rem, 4vw, 3.9rem) 1fr; gap: 1.25rem;
  padding-block: clamp(1.5rem, 2.5vw, 2.25rem); border-top: 1px solid var(--line);
  outline: none; cursor: default;
}
.award:last-child { border-bottom: 1px solid var(--line); }
.award::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--red-hot); transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease);
}
.award.is-active::before, .award:focus-visible::before { transform: scaleX(1); }
.award__num {
  font-family: var(--f-display); font-weight: 500; font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--cream-3);
  transition: color 0.5s var(--ease), -webkit-text-stroke-color 0.5s;
}
.award.is-active .award__num { color: var(--red-hot); -webkit-text-stroke-color: var(--red-hot); }
.award__body { display: grid; gap: 0.55rem; transition: transform 0.6s var(--ease); }
.award.is-active .award__body { transform: translateX(0.4rem); }
.award__kicker { color: var(--red-hot); }
.award__title { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.05; letter-spacing: -0.01em; }
.award__desc { color: var(--cream-2); max-width: 52ch; }

@media (max-width: 1024px) {
  .awards__media { grid-column: 1 / span 5; }
  .awards__list { grid-column: 6 / -1; }
}
@media (max-width: 760px) {
  .awards__media { grid-column: 1 / -1; width: 72%; justify-self: center; }
  .awards__list { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .awards__reel > * { animation: none; }
  .awards__reel > :first-child { opacity: 1; }
}

/* Pilares: el degradado del hover se fuga por el borde izquierdo de la pantalla */
.pillar { overflow: visible; }
.pillar::before { left: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--max)) / 2))); }

/* ---------- Perfil: herramientas (programas e IA) ---------- */
.tools__group { color: var(--cream-3); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; margin: 1rem 0 0.6rem; }
.skills__title + .tools__group { margin-top: 0; }
.tools__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tools__list li {
  display: inline-flex; align-items: baseline; gap: 0.4em;
  padding: 0.42rem 0.8rem; border: 1px solid var(--line-2); border-radius: 999px;
  font-size: var(--fs-small); color: var(--cream);
  transition: border-color 0.3s, color 0.3s, transform 0.4s var(--ease);
}
.tools__list li small { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--cream-3); }
.tools__list li:hover { border-color: var(--red-hot); color: var(--red-hot); transform: translateY(-2px); }
.skills__tools { grid-column: 1 / -1; } /* ocupa todo el ancho cuando el bloque va a dos columnas */
/* + Apoyo con IA: no es una herramienta más, es lo que potencia a las de arriba */
.tools__plus {
  display: grid; gap: 0.4rem; margin-top: 1rem; padding: 0.85rem 1rem;
  border-radius: var(--radius-sm); border: 1px dashed rgba(240, 58, 82, 0.45);
  background: linear-gradient(120deg, rgba(170, 9, 36, 0.14), rgba(170, 9, 36, 0) 70%);
}
.tools__plus-badge { color: var(--red-hot); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.1em; }
.tools__plus-text { color: var(--cream-2); font-size: var(--fs-small); line-height: 1.5; }

/* ---------- Testimonios: valoración con estrellas que se encienden al aparecer ---------- */
.stars { display: inline-flex; gap: 4px; }
.stars svg { width: 17px; height: 17px; fill: var(--red-hot); }
.js .quote.reveal .stars svg { opacity: 0.18; scale: 0.7; transition: opacity 0.35s var(--ease), scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.js .quote.reveal.is-in .stars svg { opacity: 1; scale: 1; }
.js .quote.reveal.is-in .stars svg:nth-child(1) { transition-delay: 0.35s; }
.js .quote.reveal.is-in .stars svg:nth-child(2) { transition-delay: 0.43s; }
.js .quote.reveal.is-in .stars svg:nth-child(3) { transition-delay: 0.51s; }
.js .quote.reveal.is-in .stars svg:nth-child(4) { transition-delay: 0.59s; }
.js .quote.reveal.is-in .stars svg:nth-child(5) { transition-delay: 0.67s; }
@media (prefers-reduced-motion: reduce) { .js .quote.reveal .stars svg { opacity: 1; scale: 1; transition: none; } }

/* ---------- Hero: enlace discreto al CV ---------- */
.hero__cv { align-self: center; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 0.25rem; font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-2); }
.hero__cv-meta { font-size: var(--fs-micro); color: var(--cream-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 0.1rem 0.3rem; }
.hero__cv:hover .hero__cv-meta { border-color: var(--red-hot); color: var(--red-hot); }

/* ---------- Contacto rápido (solo móvil) ---------- */
.quick { display: none; }
@media (max-width: 760px) {
  .quick {
    position: fixed; z-index: 44; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 6px; padding: 6px;
    background: rgba(17, 19, 25, 0.92); border: 1px solid var(--line-2); border-radius: 999px;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6);
    translate: -50% calc(100% + 24px); opacity: 0;
    transition: translate 0.5s var(--ease), opacity 0.3s var(--ease);
  }
  .quick.is-on { translate: -50% 0; opacity: 1; }
  .menu-open .quick { translate: -50% calc(100% + 24px); opacity: 0; }
  .quick__main {
    display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0 1.2rem 0 1.3rem;
    border-radius: 999px; background: var(--red); color: var(--cream);
    font-family: var(--f-mono); font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase;
    transition: scale 0.16s var(--ease);
  }
  .quick__wa {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: #25d366; color: #0a0b0e; transition: scale 0.16s var(--ease);
  }
  .quick__wa svg { width: 22px; height: 22px; fill: currentColor; }
  .quick__main:active, .quick__wa:active { scale: 0.95; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .quick { translate: -50% 0; transition: opacity 0.3s; }
  .quick__main:active, .quick__wa:active { scale: none; }
}

/* ---------- Contacto: cómo empezamos + pista del mensaje ---------- */
.contact__title { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.contact__steps {
  list-style: none; padding: 0; margin: 0 0 clamp(3.5rem, 6vw, 6rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter);
}
.contact__steps li { display: grid; gap: 0.45rem; align-content: start; padding-top: 1.1rem; border-top: 1px solid var(--line-2); }
.contact__steps strong { font-size: var(--fs-lead); font-weight: 450; color: var(--cream); }
.contact__steps li > span:last-child { color: var(--cream-2); max-width: 32ch; }
.contact__step-num { color: var(--red-hot); font-size: var(--fs-micro); letter-spacing: 0.1em; }
.field__hint { order: 3; margin-top: 0.6rem; color: var(--cream-3); font-size: var(--fs-small); line-height: 1.45; max-width: 52ch; }
.field__error { order: 4; }
@media (max-width: 760px) {
  .contact__steps { grid-template-columns: 1fr; gap: 1.25rem; }
}