/* Noceti Propiedades · propuesta de rediseño (Leomak.Soft). Concepto: "La esquina doblada". */
@font-face { font-family: 'Urbanist'; font-weight: 600; font-display: swap; src: url(fonts/urbanist-600.woff2) format('woff2'); }
@font-face { font-family: 'Urbanist'; font-weight: 800; font-display: swap; src: url(fonts/urbanist-800.woff2) format('woff2'); }
@font-face { font-family: 'Raleway'; font-weight: 400; font-display: swap; src: url(fonts/raleway-400.woff2) format('woff2'); }
@font-face { font-family: 'Raleway'; font-weight: 600; font-display: swap; src: url(fonts/raleway-600.woff2) format('woff2'); }

:root {
  /* Marca: coral medido en el logo (#ff5860) y el de su web (#f05d65); gris de sus textos (#323232). */
  --coral: #ff5860;
  --coral-web: #f05d65;
  --coral-hondo: #c4363e;   /* coral para texto sobre blanco (AA) */
  --coral-claro: #ffe8e6;   /* blanco teñido de coral, superficies */
  --tinta: #1d1819;
  --gris: #323232;
  --gris-suave: #5c5455;
  --blanco: #ffffff;
  --margen: clamp(20px, 3.2vw, 48px);
  --f-display: 'Urbanist', 'Raleway', sans-serif;
  --f-texto: 'Raleway', system-ui, sans-serif;
  --t-chico: 0.875rem;
  --t-base: 1rem;
  --t-medio: 1.25rem;
  --t-fila: 1.25rem;
  --t-grande: clamp(1.75rem, 3.2vw, 2.875rem);
  --t-titulo: clamp(2.75rem, 6.4vw, 5.75rem);
  --salida: cubic-bezier(.16, 1, .3, 1);
  --resorte: cubic-bezier(.34, 1.4, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--blanco); color: var(--tinta); font: 400 var(--t-base)/1.55 var(--f-texto); font-variant-numeric: lining-nums; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; margin: 0; text-wrap: balance; }
p { margin: 0; }
::selection { background: var(--coral); color: var(--tinta); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
html { scrollbar-color: var(--coral-hondo) var(--coral-claro); }
input { accent-color: var(--coral-hondo); caret-color: var(--coral-hondo); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: var(--margen); top: -60px; z-index: 50; padding: .6rem 1rem; background: var(--tinta); color: var(--blanco); }
.saltar:focus { top: .5rem; }

.franja { padding: .5rem var(--margen); background: var(--tinta); color: var(--blanco); font-size: var(--t-chico); line-height: 1.4; }

/* Botones: rectángulo plano, esquinas rectas, una sola forma en toda la página. */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.4rem; background: var(--tinta); color: var(--blanco); font: 600 1rem/1 var(--f-texto); text-decoration: none; transition: background-color .2s, transform .15s var(--salida); }
.boton:active { transform: scale(.97); }
.boton-chico { min-height: 44px; padding: 0 1rem; font-size: .9375rem; }
.boton-claro { background: var(--blanco); color: var(--tinta); }
@media (hover: hover) {
  .boton:hover { background: var(--coral-hondo); }
  .boton-claro:hover { background: var(--coral-claro); }
}

/* Cabecera: marca redibujada, tres links y una acción. */
.cabecera { position: relative; z-index: 5; display: flex; align-items: center; gap: 1rem; padding: 14px var(--margen); background: var(--coral); }
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--tinta); }
.marca .ene { color: var(--blanco); }
.marca .ene { width: 40px; height: 37px; }
.marca-txt { display: flex; flex-direction: column; line-height: 1; }
.marca-a { font: 800 1.375rem/1 var(--f-display); letter-spacing: -0.01em; }
.marca-b { font: 600 1rem/1.1 var(--f-display); }
.ene-arco { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linejoin: round; }
.ene-esquina { fill: currentColor; }
.cabecera nav { margin-left: auto; display: none; }
.cabecera nav ul { display: flex; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.cabecera nav a { display: inline-flex; min-height: 44px; align-items: center; color: var(--tinta); font-weight: 600; text-decoration: none; position: relative; }
.cabecera nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--salida); }
.cabecera .boton-chico { margin-left: auto; }
@media (hover: hover) { .cabecera nav a:hover::after { transform: scaleX(1); } }
@media (min-width: 760px) { .cabecera nav { display: block; } .cabecera .boton-chico { margin-left: 1rem; } }

/* Hero: charla angosta a la izquierda, título y foto con forma de su marca a la derecha. */
.hero { background: var(--coral); color: var(--tinta); padding: 8px var(--margen) 0; display: grid; gap: 28px; overflow: hidden; }
.hero-titulo { display: grid; gap: 28px; }
.hero-t { color: var(--blanco); font-size: var(--t-titulo); line-height: .9; letter-spacing: -0.035em; max-width: 9ch; }
.hero-t .letra { display: inline-block; }
.hero-t .palabra { display: inline-block; white-space: nowrap; }
.hero-charla { display: grid; gap: 22px; align-content: start; order: 2; }
.hero-titulo { order: 1; }
.hero-bajada { font-size: var(--t-medio); line-height: 1.38; max-width: 26ch; font-weight: 600; }
.hero-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hero-link { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; }
.hero-pie { font-size: var(--t-chico); }
.hero-foto { position: relative; margin: 0 calc(var(--margen) * -1); }
.hoja { position: relative; aspect-ratio: 4 / 3; --esq: clamp(64px, 16vw, 150px); }
.hoja img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; border-top-left-radius: 46% 34%; clip-path: polygon(0 0, calc(100% - var(--esq)) 0, 100% var(--esq), 100% 100%, 0 100%); }
/* La esquina doblada: el triángulo de su logo. Gira sobre la diagonal como una hoja a la que se le dobla la punta. */
.doblez { position: absolute; top: 0; right: 0; width: var(--esq); height: var(--esq); transform-style: preserve-3d; }
.doblez > span { position: absolute; inset: 0; backface-visibility: hidden; }
.doblez-frente { background: var(--blanco); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.doblez-dorso { background: var(--coral-claro); clip-path: polygon(0 0, 100% 0, 100% 100%); transform: rotate3d(1, 1, 0, 180deg); }
.hero-lema { position: relative; z-index: 2; margin: -44px 0 0 var(--margen); width: min(78%, 300px); padding: 18px 20px; background: var(--tinta); color: var(--blanco); font: 800 1.375rem/1.15 var(--f-display); letter-spacing: -0.01em; }

@media (min-width: 900px) {
  .hero { grid-template-columns: 34% 1fr; gap: 0; padding-top: 12px; height: max(620px, calc(100svh - 108px)); }
  .hero-charla { order: 0; align-self: end; padding: 0 32px 72px 0; }
  .hero-titulo { order: 0; grid-template-rows: auto 1fr; gap: 72px; min-height: 0; }
  .hero-t { max-width: none; padding-top: 2vh; }
  .hero-foto { margin: 0 calc(var(--margen) * -1) 0 0; min-height: 0; }
  .hoja { aspect-ratio: auto; height: 100%; }
  .hero-lema { position: absolute; left: -52px; top: -40px; margin: 0; width: 280px; }
}

/* Propiedades: una lista a un solo tamaño, columnas fijas. */
.propiedades { position: relative; background: var(--coral-claro); padding: clamp(72px, 10vw, 140px) var(--margen) clamp(72px, 9vw, 120px); }
.prop-cab { display: grid; gap: 14px; margin-bottom: 36px; }
.prop-cab h2, .costa h2, .nosotros h2, .contacto h2 { font-size: var(--t-grande); }
.prop-cab p { max-width: 52ch; font-size: var(--t-medio); line-height: 1.45; }
@media (min-width: 900px) { .prop-cab { grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; } }

.filtros { display: none; }
.js .filtros { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-bottom: 24px; }
.filtros fieldset { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.filtros legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.filtros label { position: relative; cursor: pointer; }
.filtros input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.filtros label span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; background: var(--blanco); font-size: var(--t-base); font-weight: 600; transition: background-color .2s, color .2s; }
.filtros input:checked + span { background: var(--tinta); color: var(--blanco); }
.filtros input:focus-visible + span { outline: 3px solid var(--tinta); outline-offset: 2px; }
.filtros label[aria-disabled="true"] span { color: var(--gris-suave); background: transparent; }
@media (hover: hover) { .filtros input:not(:checked) + span:hover { background: #ffd2ce; } }
.filtros-n { font-size: var(--t-chico); font-weight: 600; margin-left: auto; }

.grupo + .grupo { margin-top: 56px; }
.grupo-t { position: sticky; top: 0; z-index: 2; padding: 14px 0 10px; background: var(--coral-claro); color: var(--coral-hondo); font-size: var(--t-fila); letter-spacing: -0.01em; }
.grupo-n { font-family: var(--f-texto); font-weight: 600; font-size: var(--t-chico); color: var(--gris-suave); margin-left: .4rem; }
.filas { margin: 0; padding: 0; list-style: none; }
.fila { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 12px 10px; margin: 0 -12px; transition: background-color .25s; }
.fila:nth-child(odd) { background: #fff4f3; }
.f-dir { font: 800 var(--t-fila)/1.2 var(--f-display); letter-spacing: -0.01em; }
.f-precio { font: 600 var(--t-fila)/1.2 var(--f-display); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.f-tipo, .f-lugar { font-size: var(--t-base); color: var(--tinta); }
.f-tipo { grid-column: 1 / -1; }
.f-lugar { grid-column: 1 / -1; grid-row: 2; }
.f-tipo { grid-row: 3; }
.marca-dato { display: inline-block; margin-left: .5rem; padding: 1px 7px; background: var(--coral); color: var(--tinta); font-size: var(--t-chico); font-weight: 600; }
.f-acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin-top: 2px; }
.f-acciones a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-base); font-weight: 600; color: var(--coral-hondo); }
.fila .fx-ver-360 { font-size: var(--t-base); color: var(--tinta); }
@media (min-width: 1280px) {
  .fila { grid-template-columns: 18% minmax(0, 1fr) 13% 8.5rem auto; align-items: center; gap: 0 18px; padding: 6px 12px; }
  .f-dir { grid-column: 1; grid-row: 1; }
  .f-tipo { grid-column: 2; grid-row: 1; }
  .f-lugar { grid-column: 3; grid-row: 1; color: var(--tinta); }
  .f-precio { grid-column: 4; grid-row: 1; }
  .f-acciones { grid-column: 5; grid-row: 1; margin: 0; display: grid; grid-template-columns: 5.5rem 7rem 6.5rem; gap: 0 12px; justify-content: end; }
  .f-acciones > a { grid-column: 1; }
  .f-acciones .fx-ver-360 { grid-column: 2; }
  .f-acciones .doblar { grid-column: 3; }
}
.fila[hidden] { display: none; }
@media (hover: hover) { .fila:hover, .fila:nth-child(odd):hover { background: var(--blanco); } }

/* Guardar = doblarle la esquina a la fila. */
.doblar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--tinta); font: 600 var(--t-base)/1 var(--f-texto); cursor: pointer; }
.doblar-icono { position: relative; width: 18px; height: 18px; border: 1.5px solid currentColor; clip-path: polygon(0 0, 62% 0, 100% 38%, 100% 100%, 0 100%); }
.doblar-icono::after { content: ''; position: absolute; top: 0; right: 0; width: 38%; height: 38%; background: currentColor; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.doblar[aria-pressed="true"] { color: var(--coral-hondo); }
.doblar[aria-pressed="true"] .doblar-icono { background: var(--coral); }
.no-js .doblar, html:not(.js) .doblar { display: none; }
.fila.guardada::after { content: ''; position: absolute; top: 0; right: 0; width: 26px; height: 26px; background: var(--coral-hondo); clip-path: polygon(0 0, 100% 0, 100% 100%); animation: punta .5s var(--resorte); }
@keyframes punta { from { transform: perspective(300px) rotate3d(1, 1, 0, 180deg); } to { transform: perspective(300px) rotate3d(1, 1, 0, 0deg); } }
.fila.guardada, .fila.guardada:nth-child(odd) { background: #ffd2ce; }
.fila.guardada .f-acciones a, .fila.guardada .doblar, .fila.guardada .f-lugar, .fila.guardada .f-tipo { color: var(--tinta); }

.guardadas { position: sticky; bottom: 12px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 28px; padding: 12px 14px 12px 18px; background: var(--tinta); color: var(--blanco); box-shadow: 0 12px 30px rgb(29 24 25 / .28); } /* taste-skill-ignore: barra fija que flota */
.guardadas[hidden] { display: none; }
.guardadas-t { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-right: auto; }
.guardadas .doblar-icono { background: var(--coral); }
.guardadas-vaciar { min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--blanco); font: 600 var(--t-chico)/1 var(--f-texto); text-decoration: underline; text-underline-offset: .22em; cursor: pointer; }
.guardadas.entra { animation: guardar-sube .5s var(--salida); }
@keyframes guardar-sube { from { transform: translateY(24px); opacity: 0; } }
.sin-fichas { padding: 32px 0; font-size: var(--t-medio); }

/* Cinta de barrios. */
.cinta { padding: 14px 0; background: var(--tinta); color: var(--blanco); font: 600 var(--t-medio)/1.2 var(--f-display); }

/* Foto que sangra por dos bordes, con la barra del pie en color plano. */
.costa { display: grid; background: var(--tinta); }
.costa-foto { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.costa-foto img { width: 100%; height: 118%; object-fit: cover; transform: translateY(var(--fx-y, 0)); }
.costa-barra { position: relative; z-index: 1; display: grid; gap: 14px; padding: 36px var(--margen) 44px; background: var(--coral); }
.costa-barra p { font-size: var(--t-medio); line-height: 1.45; max-width: 40ch; }
.costa-barra .costa-pie { font-size: .875rem; }
@media (min-width: 900px) {
  .costa { grid-template-columns: 1fr 1fr 1fr; align-items: end; }
  .costa-foto { grid-column: 1 / -1; grid-row: 1; aspect-ratio: auto; height: min(78svh, 720px); }
  .costa-barra { grid-column: 3; grid-row: 1; margin-right: var(--margen); }
}

/* Nosotros: el texto grande con las palabras marcadas, y el arco. */
.nosotros { display: grid; gap: 32px; padding: clamp(80px, 11vw, 160px) var(--margen); background: var(--blanco); }
.nos-texto { display: grid; gap: 24px; }
.nos-texto p { font-size: clamp(1.25rem, 1.9vw, 1.75rem); line-height: 1.3; color: var(--tinta); max-width: 46ch; }
.nos-texto strong { color: var(--tinta); font-weight: 600; }
.nos-texto mark { padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; color: var(--tinta); background-color: var(--marcador); transition: background-color .7s var(--salida); }
.m1 { --marcador: var(--coral); }
.m2 { --marcador: #ffd2ce; }
.m3 { --marcador: #ffc3bd; }
.nos-lema a { display: inline-block; padding: 10px 14px; background: var(--tinta); color: var(--blanco); font: 800 clamp(1.25rem, 2vw, 1.75rem)/1.2 var(--f-display); text-decoration: none; transition: background-color .2s; }
@media (hover: hover) { .nos-lema a:hover { background: var(--coral-hondo); } }
.nos-foto { margin: 0; justify-self: start; width: min(100%, 420px); }
.nos-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-top-left-radius: 50% 36%; border-top-right-radius: 50% 36%; }
.nos-foto figcaption { margin-top: 10px; font-size: .875rem; color: var(--gris); }
@media (min-width: 900px) {
  .nosotros { grid-template-columns: 7fr 4fr; column-gap: 56px; align-items: start; }
  .nosotros h2 { grid-column: 1 / -1; }
  .nos-foto { justify-self: end; }
}

/* Lo que hacemos: capacidades a escala de cartel sobre la tinta. */
.hacemos { padding: clamp(80px, 13vh, 160px) var(--margen); background: var(--tinta); color: var(--blanco); }
.hac-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 28px; }
.hac-fila { display: grid; gap: 6px; transition: color .3s; }
.hac-cab h2, .hac-n { font: 800 clamp(1.875rem, 3.6vw, 3.5rem)/1.02 var(--f-display); letter-spacing: -0.025em; }
.hac-cab h2 { color: var(--coral); }
.hac-d { max-width: 44ch; font-size: var(--t-base); color: #e9dfe0; }
@media (min-width: 900px) {
  .hac-lista { gap: .35em; }
  .hac-fila { grid-template-columns: 8fr 4fr; align-items: baseline; gap: 32px; }
  .hac-lista:hover .hac-fila:not(.hac-cab) .hac-n { color: #b9adae; }
  .hac-lista:hover .hac-fila:not(.hac-cab):hover .hac-n { color: var(--blanco); }
}
.hac-n .tilde { display: inline-block; width: .5em; height: .5em; margin-left: .2em; background: var(--coral); clip-path: polygon(0 0, 100% 0, 100% 100%); vertical-align: .55em; }

/* Mapa del kit: tonos de la marca. */
.fx-mapa { max-width: none; margin: 0; padding-left: var(--margen); padding-right: var(--margen); }
.fx-mapa-lista a, .fx-mapa-frame { border-radius: 0; }
#fx-mapa-t { font-size: var(--t-grande); }

/* Contacto: tira de fotos que se corre, título y tres celdas. */
.contacto { padding: 48px 0 clamp(64px, 9vw, 120px); background: var(--coral); overflow: hidden; }
.tira { overflow: hidden; margin-bottom: 64px; }
.tira-pista { display: flex; gap: 8px; width: max-content; }
.tira-pista img { height: 110px; width: auto; object-fit: cover; }
.tira-pista img:nth-child(3n+1) { aspect-ratio: 3 / 4; }
.tira-pista img:nth-child(3n+2) { aspect-ratio: 1; }
.tira-pista img:nth-child(3n) { aspect-ratio: 3 / 2; }
@media (min-width: 760px) { .tira-pista img { height: 150px; } }
.anim .tira-pista { animation: tira 70s linear infinite; }
@keyframes tira { to { transform: translateX(-25%); } }
.contacto h2, .celdas, .con-mail { margin-left: var(--margen); margin-right: var(--margen); }
.contacto h2 { margin-bottom: 36px; }
.celdas { display: grid; gap: 8px; padding: 0; list-style: none; }
.celda { display: grid; align-content: center; min-height: 96px; background: #ff7a80; }
.celda > a, .celda > .celda-t { text-decoration: none; }
.celda > a, .celda:not(:has(> a)) { display: grid; gap: 4px; padding: 18px 20px; min-height: 96px; align-content: center; }
.celda-t { font: 800 1.125rem/1.1 var(--f-display); }
.celda-d { font-size: var(--t-base); }
.celda:nth-child(1) { background: var(--tinta); color: var(--blanco); }
.celda > a { transition: background-color .2s; }
@media (hover: hover) { .celda > a:hover { background: rgb(255 255 255 / .2); } .celda:nth-child(1) > a:hover { background: var(--coral-hondo); } }
.con-mail { margin-top: 20px; }
@media (min-width: 900px) { .celdas { grid-template-columns: repeat(3, 1fr); } }

/* Pie: la N de la marca construida grande. */
.pie { padding: 56px var(--margen) 40px; background: var(--tinta); color: var(--blanco); }
.pie-marca { color: var(--coral); }
.pie-marca .ene { width: min(100%, 380px); height: auto; }
.pie-marca .ene-arco { stroke-width: 2.2; }
.pie-cols { display: grid; gap: 24px; margin: 48px 0 32px; }
.pie-cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.pie-cols a { display: inline-flex; min-height: 44px; align-items: center; }
.pie-dir { line-height: 1.6; }
.pie-creditos, .pie-legal { font-size: var(--t-base); line-height: 1.5; color: #e2d9da; max-width: 75ch; }
.pie-legal { margin-top: 12px; }
@media (min-width: 900px) { .pie-cols { grid-template-columns: 1fr 1fr 1fr; } }

/* Movimiento: lo que se oculta para animar se oculta solo con JS y sin movimiento reducido. */
.anim .doblez { transform: perspective(700px) rotate3d(1, 1, 0, 180deg); }
.anim .doblez.doblada { transform: perspective(700px) rotate3d(1, 1, 0, 0deg); transition: transform 1.1s var(--resorte) .5s; }
.anim .hoja img { clip-path: polygon(0 100%, calc(100% - var(--esq)) 100%, 100% 100%, 100% 100%, 0 100%); }
.anim .hoja.abierta img { clip-path: polygon(0 0, calc(100% - var(--esq)) 0, 100% var(--esq), 100% 100%, 0 100%); transition: clip-path 1.1s var(--salida); }
.anim .hero-lema { opacity: 0; transform: translateY(16px); }
.anim .hero-lema.vista { opacity: 1; transform: none; transition: opacity .6s, transform .8s var(--salida); }
.anim .fila.por-entrar { opacity: 0; transform: translateY(18px); }
.anim .fila.entra { opacity: 1; transform: none; transition: opacity .5s, transform .7s var(--salida), background-color .25s; }
.anim .nos-texto mark { background-color: transparent; }
.anim .nos-texto.vista mark { background-color: var(--marcador); }
.anim .nos-texto.vista mark:nth-of-type(2) { transition-delay: .12s; }
.anim .nos-texto.vista mark:nth-of-type(3) { transition-delay: .24s; }
.anim .nos-texto.vista mark:nth-of-type(4) { transition-delay: .36s; }
.anim .nos-texto.vista mark:nth-of-type(5) { transition-delay: .48s; }
.anim .nos-texto.vista mark:nth-of-type(6) { transition-delay: .6s; }
.anim .hac-fila.por-entrar { opacity: 0; transform: translateY(24px); }
.anim .hac-fila.entra { opacity: 1; transform: none; transition: opacity .6s, transform .8s var(--salida), color .3s; }
.anim .celda.por-entrar { opacity: 0; transform: translateY(20px); }
.anim .celda.entra { opacity: 1; transform: none; transition: opacity .5s, transform .7s var(--salida); }
.anim .pie-marca .ene-esquina { transform-box: fill-box; transform-origin: 50% 50%; transform: rotate3d(1, 1, 0, 180deg); }
.anim .pie-marca.vista .ene-esquina { transform: none; transition: transform 1s var(--resorte); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.anim .hero-t:not([aria-label]) { opacity: 0; }

.ver-mas { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 12px; border: 0; background: var(--tinta); color: var(--blanco); font: 600 var(--t-base)/1 var(--f-texto); cursor: pointer; transition: background-color .2s; }
.ver-mas[hidden] { display: none; }
@media (hover: hover) { .ver-mas:hover { background: var(--coral-hondo); } }
@media (hover: hover) { .tira:hover .tira-pista { animation-play-state: paused; } }


@media (min-width: 600px) and (max-width: 899px) { .hoja { aspect-ratio: 16 / 9; } }
.fx-mapa { padding-bottom: clamp(56px, 8vw, 96px); }
@media (max-width: 599px) { .guardadas { gap: 6px 12px; padding: 10px 12px; } .guardadas .boton { min-height: 44px; padding: 0 1rem; } }

/* fx: colores para la capa de efectos */
:root { --fx-acento: #ff5860; --fx-oscuro: #1d1819; --fx-claro: #ffe8e6; }