:root { --navy:#01193d; --paper:#f6f2e9; }
/* Integration: actual shared header heights; preserve CTA contrast against the cover's link rule. */
.pr2 .pr2-btn { color:#01193d; }
.pr2:not(.pr2--js) .pr2-mandos { display:none; }
@media(min-width:1001px) { main>.pr2 { --pr2-cabecera:90px; } }
@media(max-width:700px) { main>.pr2 { --pr2-cabecera:85px; } }
/* Shared decision with Claude: gold italic is a cover accent, not a repeated template. */
.section h2 em { font-style:normal; color:inherit; }
.division-card { display:grid; grid-template-columns:24px 48px 1fr 24px; gap:22px; align-items:start; padding:26px 0; text-decoration:none; }
.division-card>div { padding:0; }
.division-card h3 { font-size:23px; line-height:1.15; font-weight:400; margin:0 0 9px; }
.division-card p { max-width:43ch; font-size:16px; line-height:1.5; color:var(--muted); margin:0; }
.division-card .tiny { padding-top:4px; }
.division-arrow { font-size:24px; }
.division-card:hover h3 { text-decoration:underline; text-underline-offset:5px; }
@media(max-width:700px) { .division-card{grid-template-columns:36px 1fr 20px;gap:14px;padding:22px 0}.division-card>.tiny{display:none}.division-card img{width:36px;height:36px}.division-card h3{font-size:21px}.division-card p{font-size:16px} }
/* Claude's process integrates directly; no iframe or duplicate section heading. */
.business>.tal { grid-column:1/-1; margin-top:60px; padding:42px 0 0; border-top:1px solid var(--line); --tal-tinta:var(--navy); }
.tal .tal-leyenda { position:static; display:block; inset:auto; z-index:auto; }
.tal-more { margin:16px 0 24px; }
.tal-more summary { display:flex;justify-content:space-between;gap:15px;cursor:pointer;font-size:14px;color:var(--muted);list-style:none;padding:10px 0; }
.tal-more summary::-webkit-details-marker { display:none; }
.tal-more .tal-panel-detalle { margin:10px 0 0; }
.tal-more[open] summary span { transform:rotate(45deg); }
@media(max-width:700px) { .business>.tal{margin-top:35px;padding-top:25px}.tal .tal-leyenda{font-size:10px} }
/* Desktop composition: the development name and controls remain in the first view. */
@media (min-width:1001px) {
  .header { height:90px; }
  .opening-top { padding-top:28px; padding-bottom:28px; }
  .opening h1 { font-size:clamp(84px,7vw,108px); }
  .stage { height:clamp(400px,calc(100svh - 415px),650px); }
  .opening-intro { width:310px; }
  .opening-intro p { font-size:19px; }
  .opening-intro .location-mark { margin-bottom:12px; }
  .opening-foot { padding-top:17px; padding-bottom:17px; }
}
/* Content is never hidden while waiting for JavaScript or viewport observation. */
@media (prefers-reduced-motion:no-preference) {
  .opening h1 { animation:arrive .8s cubic-bezier(.2,.65,.3,1) both; }
  .opening-intro { animation:arrive .8s .08s cubic-bezier(.2,.65,.3,1) both; }
  .stage { animation:arrive .9s .12s cubic-bezier(.2,.65,.3,1) both; }
  .division summary img { transition:transform .25s; }
  .division summary:hover img { transform:translateY(-3px); }
  .stage-controls button,.contact-top span,.all-projects span { transition:transform .2s; }
  .contact-top:hover span,.all-projects:hover span { transform:translate(3px,-3px); }
  @keyframes arrive { from {opacity:.4;transform:translateY(12px)} to{opacity:1;transform:none} }
}