@layer finca {

.alojamiento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-6);
  align-items: center;
}

.alojamiento__foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 4 / 3;
  background: var(--c-fondo-alt);
}
.alojamiento__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.alojamiento__datos {
  list-style: none;
  padding: 0;
  margin-top: var(--e-3);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-2);
}
.alojamiento__datos li {
  border-top: 1px solid var(--c-linea);
  padding-top: var(--e-1);
}
.alojamiento__datos strong {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 400;
}
.alojamiento__datos span {
  font-size: var(--t-xs);
  letter-spacing: var(--ls-ancho);
  text-transform: uppercase;
  color: var(--c-tinta-suave);
}

@media (max-width: 899px) {
  .alojamiento { grid-template-columns: 1fr; gap: var(--e-3); }
}

.zonas--recorrido { counter-reset: paso; }

.zonas--recorrido .zona { counter-increment: paso; }

.zonas--recorrido .zona__cuerpo .antetitulo::before {
  content: counter(paso, decimal-leading-zero) " · ";
  color: var(--c-acento);
}

@property --trazo {
  syntax: '<number>';
  inherits: true;      
  initial-value: 0;
}

.seccion--alt {
  position: relative;
  overflow: clip;            
  isolation: isolate;

  
  --trazo: 0;

  
  --azulejo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23960018' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(75,75)' stroke-width='1.1'%3E%3Cg opacity='.95'%3E%3Cpath d='M0 0 C-7 -10 -7 -22 0 -29 C7 -22 7 -10 0 0 Z'/%3E%3Cpath d='M0 0 C-7 -10 -7 -22 0 -29 C7 -22 7 -10 0 0 Z' transform='rotate(90)'/%3E%3Cpath d='M0 0 C-7 -10 -7 -22 0 -29 C7 -22 7 -10 0 0 Z' transform='rotate(180)'/%3E%3Cpath d='M0 0 C-7 -10 -7 -22 0 -29 C7 -22 7 -10 0 0 Z' transform='rotate(270)'/%3E%3C/g%3E%3Cg opacity='.55'%3E%3Cpath d='M0 0 C-6 -9 -6 -18 0 -23 C6 -18 6 -9 0 0 Z' transform='rotate(45)'/%3E%3Cpath d='M0 0 C-6 -9 -6 -18 0 -23 C6 -18 6 -9 0 0 Z' transform='rotate(135)'/%3E%3Cpath d='M0 0 C-6 -9 -6 -18 0 -23 C6 -18 6 -9 0 0 Z' transform='rotate(225)'/%3E%3Cpath d='M0 0 C-6 -9 -6 -18 0 -23 C6 -18 6 -9 0 0 Z' transform='rotate(315)'/%3E%3C/g%3E%3Ccircle r='2.8' opacity='.9'/%3E%3C/g%3E%3Cg opacity='.30' stroke-width='.8'%3E%3Cpath d='M75 33 87 45 105 45 105 63 117 75 105 87 105 105 87 105 75 117 63 105 45 105 45 87 33 75 45 63 45 45 63 45Z'/%3E%3C/g%3E%3Cg opacity='.42' stroke-width='.9'%3E%3Cpath d='M0 0 150 0 150 150 0 150Z'/%3E%3Cpath d='M0 0 16 16M150 0 134 16M0 150 16 134M150 150 134 134'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.seccion--alt::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;                
  pointer-events: none;

  
  clip-path: inset(0 0 calc((1 - var(--trazo)) * 100%) 0);

  
  opacity: .055;

  
  background-image:
    linear-gradient(180deg,
      transparent,
      color-mix(in srgb, var(--c-acento) 90%, transparent),
      transparent),
    var(--azulejo);

  background-size:
    100% 2px,        
    150px 150px;     

  
  background-position:
    0 calc(var(--trazo) * 100%),
    0 0;             

  background-repeat: no-repeat, repeat;

  
}

html:not(.js) .seccion--alt { --trazo: 1; }

@media (prefers-reduced-motion: reduce) {
  .seccion--alt { --trazo: 1; }
}

@media (max-width: 899px) {
  .seccion--alt { --trazo: 1; }
}

.seccion--alt > * { position: relative; z-index: 1; }

.seccion--alt.faq::after { --trazo: 1; }

}