/* Home: "Elegí por lo que necesitás resolver" como tres puertas.
   La que mirás se abre: el trazo del producto se dibuja de fondo, el logo crece y sus gaviotas llegan volando. */
.doors { display: flex; gap: 14px; height: clamp(420px, 40vw, 500px); }
.door {
  position: relative; isolation: isolate; overflow: hidden; flex: 1 1 0; min-width: 0;
  display: grid; grid-template-rows: auto 1fr auto auto; padding: 30px 30px 28px; border-radius: 24px; text-decoration: none; color: var(--ink);
  background: var(--glass-bg); border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  transition: flex-grow .8s cubic-bezier(.16,1,.3,1), border-color .4s, box-shadow .5s;
}
.door.is-open { flex-grow: 2.3; border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-line)); box-shadow: inset 0 1px 0 var(--glass-hi), 0 40px 70px -46px color-mix(in srgb, var(--accent) 70%, transparent); }
/* luz que sigue al cursor dentro de la puerta */
.door::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}
.door:hover::before, .door.is-open::before { opacity: 1; }

.door-need { font: 700 clamp(1.25rem, 1.7vw, 1.6rem)/1.15 var(--head); letter-spacing: -.02em; max-width: 14em; text-wrap: balance; transition: transform .8s cubic-bezier(.16,1,.3,1); }

.door-line { position: absolute; left: -4%; right: -4%; top: 21%; width: 108%; height: 30%; z-index: -1; overflow: visible; pointer-events: none; }
.door-line path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.door-line .base { stroke: color-mix(in srgb, var(--ink) 10%, transparent); stroke-width: 2; }
.door-line .draw { stroke: var(--accent); stroke-width: 3.5; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.door.is-open .door-line .draw { opacity: 1; animation: doorDraw 1.4s .1s cubic-bezier(.45,0,.3,1) forwards; }
@keyframes doorDraw { to { stroke-dashoffset: 0; } }

.door-logo { align-self: end; display: block; width: min(100%, calc(var(--r, 2.5) * 88px)); transition: width .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.door.is-open .door-logo { width: min(100%, calc(var(--r, 2.5) * 124px)); }
.door-logo .plogo { display: block; width: 100%; height: auto; overflow: visible; }
.door .ink { fill: var(--ink); }
.door .plogo g { transform-box: fill-box; }
.door .plogo .pl-gull { transform-origin: 50% 50% !important; }
.door .plogo .pl-l { transform-origin: 50% 100% !important; }
.door.is-open .pl-gull { animation: doorGull 1.3s cubic-bezier(.22,.8,.3,1) both; animation-delay: calc(var(--i, 0) * 160ms + 250ms); }
.door.is-open .pl-l { animation: doorLetter .7s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.door .pl-dot path { transform-box: fill-box; transform-origin: 50% 50%; }
.door.is-open .pl-dot path { animation: typing 1.3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 160ms + .9s); }
@keyframes doorGull { 0% { opacity: 0; transform: translate(-220%, -120%) rotate(-16deg) scale(.6); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes doorLetter { from { transform: translateY(14%); opacity: .4; } to { transform: none; opacity: 1; } }

.door-more { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px; margin-top: 0; max-height: 0; opacity: 0; transform: translateY(12px); overflow: hidden;
  transition: max-height .7s cubic-bezier(.16,1,.3,1), opacity .4s, transform .7s cubic-bezier(.16,1,.3,1), margin-top .7s cubic-bezier(.16,1,.3,1); }
.door.is-open .door-more { max-height: 160px; opacity: 1; transform: none; margin-top: 22px; transition-delay: .15s; }
.door-txt { color: var(--ink-2); font-size: 1rem; line-height: 1.5; max-width: 26em; }
.door .go {
  display: inline-flex; align-items: center; padding: 12px 20px; border-radius: var(--r); white-space: nowrap;
  font: 700 1rem/1.2 var(--head); color: var(--on-accent); background: var(--accent); --fill: var(--ink);
}
.door .go::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--ink); clip-path: circle(0% at 50% 50%); transition: clip-path .65s cubic-bezier(.16,1,.3,1); }
.door .go { position: relative; isolation: isolate; overflow: hidden; }
.door .go:hover { color: var(--bg); }
.door .go:hover::before { clip-path: circle(150% at 50% 50%); }
.door .go .roll > span, .door .go .roll::after { transition: transform .55s cubic-bezier(.16,1,.3,1); }
.door .go:hover .roll > span, .door .go:hover .roll::after { transform: translateY(-100%); }

@media (max-width: 900px) {
  .doors { flex-direction: column; height: auto; }
  .door, .door.is-open { flex: none; grid-template-rows: none; gap: 14px; padding: 26px 24px 24px; min-height: 0; }
  .door-need { order: -1; }
  .door-line { position: static; width: 100%; height: 86px; margin: 2px 0 -4px; }
  .door-logo, .door.is-open .door-logo { width: min(80%, calc(var(--r, 2.5) * 96px)); }
  .door-more { max-height: none; opacity: 1; transform: none; margin-top: 4px; grid-template-columns: 1fr; }
  .door .go { justify-self: start; }
  .door .door-line .draw { opacity: 1; stroke-dashoffset: 0; animation: none; }
}
@media (max-width: 700px) { .door { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--surface) 92%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  .door, .door-logo, .door-more { transition: none; }
  .door.is-open .pl-gull, .door.is-open .pl-l, .door.is-open .pl-dot path { animation: none; }
  .door.is-open .door-line .draw { animation: none; stroke-dashoffset: 0; }
}
@keyframes typing { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-38%); } }

/* ---------- Puertas chicas: dos soluciones más, sin competir con las tres principales */
.doors-more { margin-top: 18px; display: grid; gap: 12px; }
.dm-label { font: 600 .95rem var(--body); color: #4A5067; }
.doors.sm { height: 170px; gap: 14px; }
.doors.sm .door { padding: 20px 22px; border-radius: 20px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 20px; }
.doors.sm .door.is-open { flex-grow: 1.7; }
.doors.sm .door-need { grid-column: 1; font-size: 1.12rem; }
.doors.sm .door-logo { grid-column: 1; grid-row: 2; align-self: end; width: calc(var(--r, 2.5) * 46px); }
.doors.sm .door.is-open .door-logo { width: calc(var(--r, 2.5) * 58px); }
.doors.sm .door-line { top: 18%; height: 46%; left: 30%; width: 72%; }
.doors.sm .door-more { grid-column: 2; grid-row: 1 / 3; align-self: end; display: grid; grid-template-columns: 1fr; justify-items: end; text-align: right; gap: 10px; max-height: none; max-width: 0; margin: 0; transform: translateX(10px);
  transition: max-width .7s cubic-bezier(.16,1,.3,1), opacity .4s, transform .7s cubic-bezier(.16,1,.3,1); }
.doors.sm .door.is-open .door-more { max-width: 290px; margin: 0; transform: none; }
.doors.sm .door-txt { font-size: .92rem; }
.doors.sm .go { padding: 10px 16px; font-size: .92rem; }
@media (max-width: 900px) {
  .doors.sm { height: auto; }
  .doors.sm .door { grid-template-columns: 1fr; grid-template-rows: none; }
  .doors.sm .door-line { display: none; }
  .doors.sm .door-logo, .doors.sm .door.is-open .door-logo { grid-row: auto; width: calc(var(--r, 2.5) * 52px); }
  .doors.sm .door-more { grid-column: 1; grid-row: auto; max-width: none; justify-items: start; text-align: left; transform: none; opacity: 1; }
}
.doors.sm .door-line { left: 22%; width: 34%; }
@media (max-width: 900px) {
  .doors.sm .door { padding: 18px 20px; gap: 10px; }
  .doors.sm .door-need { font-size: 1.05rem; }
  .doors.sm .door-logo, .doors.sm .door.is-open .door-logo { width: calc(var(--r, 2.5) * 40px); }
  .doors.sm .door-txt { font-size: .92rem; }
  .doors.sm .go { padding: 9px 14px; font-size: .9rem; }
}