/* Portada de Timbre: foto a sangre con pastillas flotantes y bloque de texto debajo. Sin frameworks. */
:root{
  --violeta:#5B3DF5; --lima:#C8FF3D; --indigo:#120F2A; --nube:#F4F3FF;
  --tinta:#15122B; --menta:#2EE6A8; --coral:#FF5A7A; --lila-foto:#BFB0F4;
  --texto-suave:#4A4870;
  --sombra-pastilla:none; /* brand book v0.6: nunca sombras, la profundidad la da el color */
  --fuente:'Rubik','Arial Black',sans-serif;
  /* Clases con prefijo propio (portada, pastilla, cta) para no chocar con .hero y .btn de la web */
}

/* ---- Sección ---- */
.portada{display:grid;gap:0;background:var(--nube);margin:0;padding:0;max-width:none;width:100%}
.portada *{box-sizing:border-box}
.portada img{display:block;max-width:100%}

/* ---- Foto (60 vh en escritorio para que el titular y los botones queden sobre el pliegue) ---- */
.portada__media{
  position:relative;width:100%;overflow:hidden;background:var(--lila-foto);
  aspect-ratio:2752/1536;max-height:min(50vh,640px);min-height:360px;
  --px:0;--py:0;
}
.portada__media picture{display:contents}
.portada__photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;
  animation:portada-fade .5s ease-out both;
}
@keyframes portada-fade{from{opacity:0}to{opacity:1}}

/* ---- Pastillas ---- */
.pastilla{
  position:absolute;z-index:2;border-radius:999px;box-shadow:var(--sombra-pastilla);
  font-family:var(--fuente);font-weight:700;white-space:nowrap;
  transform:rotate(var(--rot,0deg));
  /* El paralaje usa la propiedad `translate`, independiente de `transform`, para no pelear con la animación de entrada */
  translate:calc(var(--px) * var(--depth,0px)) calc(var(--py) * var(--depth,0px));
  transition:translate .35s ease-out;
  animation:pastilla-in .6s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:var(--delay,.5s);
}
@keyframes pastilla-in{
  from{opacity:0;transform:translateY(22px) scale(.82) rotate(var(--rot,0deg))}
  to{opacity:1;transform:translateY(0) scale(1) rotate(var(--rot,0deg))}
}
.pastilla--text{padding:.42em .85em;font-size:clamp(18px,2.2vw,40px);line-height:1.1;letter-spacing:-.01em}
.pastilla--logo{left:8%;top:14%;padding:12px 24px;background:var(--lima);text-decoration:none}
.pastilla--logo img{height:80px;width:auto}
.pastilla--interesa{right:6%;top:28%;background:var(--indigo);color:var(--nube)}
.pastilla--visita{right:8%;bottom:18%;background:var(--menta);color:var(--tinta)}
.pastilla--sinllamar{left:9%;bottom:14%;background:var(--coral);color:var(--tinta)}
.pastilla--logo:focus-visible{outline:3px solid var(--violeta);outline-offset:4px}
/* La cápsula del logo es el timbre: botón que suena y emite ondas Lima al tocarlo */
button.pastilla--logo{border:0;margin:0;font:inherit;cursor:pointer;appearance:none;-webkit-appearance:none}
.pastilla--logo::before,.pastilla--logo::after{content:'';position:absolute;inset:-8px;border-radius:inherit;border:3px solid var(--lima);opacity:0;pointer-events:none}
.pastilla--logo.is-ringing::before{animation:pastilla-onda .9s ease-out}
.pastilla--logo.is-ringing::after{animation:pastilla-onda .9s ease-out .22s}
.pastilla--logo.is-ringing img{animation:pastilla-campanazo .6s ease-in-out}
@keyframes pastilla-onda{from{opacity:.95;transform:scale(1)}to{opacity:0;transform:scale(1.45)}}
@keyframes pastilla-campanazo{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}
/* Variantes para cápsulas que hablan al propietario (sección «Vendo o arriendo») */
.pastilla--sm{font-size:clamp(12px,1.1vw,15px);padding:.45em .85em;letter-spacing:0}
.pastilla--indigo{background:var(--indigo);color:var(--nube)}
.pastilla--menta{background:var(--menta);color:var(--tinta)}
.pastilla--coral{background:var(--coral);color:var(--tinta)}
.pastilla--lima{background:var(--lima);color:var(--tinta)}

/* ---- Texto debajo de la foto ---- */
.portada__copy{width:min(100% - 48px,1040px);margin:0 auto;padding:36px 0 56px;text-align:center}
.portada__copy h1{margin:0;font-weight:800;font-size:clamp(40px,5.2vw,76px);line-height:1.02;letter-spacing:-.01em;color:var(--tinta);text-wrap:balance}
.portada__copy p{margin:14px auto 0;max-width:44ch;font-weight:500;font-size:19px;color:var(--texto-suave)}
.portada__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
.cta{
  display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border-radius:999px;
  font-family:var(--fuente);font-weight:700;font-size:18px;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;
}
.cta:hover{transform:translateY(-1px)}
.cta:focus-visible{outline:3px solid var(--violeta);outline-offset:3px}
.cta--lima{background:var(--lima);color:var(--tinta)}
.cta--violeta{border:2px solid var(--violeta);color:var(--violeta);background:transparent}

/* ---- Escritorio ancho: texto a la izquierda y foto alta a la derecha, todo sobre el pliegue ---- */
@media (min-width:1100px){
  .portada{display:grid;grid-template-columns:minmax(380px,1fr) minmax(0,1.25fr);align-items:center;gap:56px;width:min(100% - 96px,1440px);margin:0 auto;padding:36px 0 56px}
  .portada__media{order:2;aspect-ratio:4/3.6;max-height:min(76vh,780px);min-height:540px;border-radius:32px}
  .portada__photo{object-position:center 25%}
  .portada__copy{order:1;width:auto;padding:0;text-align:left}
  .portada__copy h1{font-size:clamp(48px,4.6vw,72px)}
  .portada__copy p{margin-left:0;margin-right:0}
  .portada__actions{justify-content:flex-start}
  .pastilla--text{font-size:clamp(18px,1.7vw,30px)}
  .pastilla--logo{left:6%;top:6%}
  .pastilla--interesa{right:5%;top:12%}
  .pastilla--visita{right:6%;bottom:12%}
  .pastilla--sinllamar{left:6%;bottom:8%}
}

/* ---- Tablet ---- */
@media (max-width:1100px){
  .pastilla--logo img{height:60px}
  .pastilla--logo{padding:10px 18px}
}

/* ---- Celular: la foto se vuelve vertical y las pastillas se reordenan hacia las esquinas ---- */
@media (max-width:720px){
  .portada__media{aspect-ratio:4/5;max-height:none;min-height:0}
  .portada__photo{object-position:center 30%}
  .pastilla--text{font-size:clamp(13px,3.8vw,17px);padding:.5em .9em}
  .pastilla--sm{font-size:clamp(11px,3vw,13px);padding:.45em .8em}
  .pastilla--logo{left:5%;top:5%;padding:9px 16px}
  .pastilla--logo img{height:44px}
  .pastilla--interesa{right:4%;top:9%}
  .pastilla--visita{right:5%;bottom:11%}
  .pastilla--sinllamar{left:5%;bottom:5%}
  .portada__copy{width:min(100% - 32px,1040px);padding:34px 0 48px}
  .portada__copy p{font-size:17px}
  .portada__actions{flex-direction:column;align-items:stretch}
  .cta{width:100%}
}

/* ---- Menos movimiento ---- */
@media (prefers-reduced-motion:reduce){
  .portada__photo,.pastilla{animation:none}
  .pastilla{translate:0 0;transition:none}
  .pastilla--logo.is-ringing::before,.pastilla--logo.is-ringing::after,.pastilla--logo.is-ringing img{animation:none}
  .cta{transition:none}
}