/* Shared action and enquiry controls for the bilingual LAB pages. */
:root {
  --control-radius: 8px;
  --control-gold: #ffd45b;
  --control-focus: #fff1a6;
  --control-gold-face: url('/assets/web/ia-empresas/v1/surfaces/button-gold-2x.webp');
}

.arrow {
  flex: 0 0 auto;
  color: var(--control-gold);
}

.disclosure-trigger { list-style: none; }
.disclosure-trigger::marker { content: ''; }
.disclosure-trigger::-webkit-details-marker { display: none; }

.disclosure-mark {
  flex: 0 0 auto;
  color: var(--control-gold);
  transition: transform .16s;
}

details[open] > .disclosure-trigger > .disclosure-mark { transform: rotate(45deg); }

.button,
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 48px;
  max-width: 100%;
  padding: 10px 21px;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  transition: transform .16s, box-shadow .16s, background-color .16s;
}

.button:hover:not(:disabled),
.header-cta:hover { transform: translateY(-1px); }

.button:active:not(:disabled),
.header-cta:active { transform: none; }

.button-gold {
  background: var(--control-gold) var(--control-gold-face) center / 100% 100% no-repeat;
  border-color: #ffde7b;
  color: #161408;
  box-shadow: 0 2px 13px #dba62c21;
}

.button-gold:hover:not(:disabled) { box-shadow: 0 3px 20px #ffd45b40; }

.button-outline,
.header-cta {
  background-color: #080d0c;
  border-color: #d0a53b;
  box-shadow: inset 0 1px 0 #fff1a61a;
}

.button-outline { color: #f1f3f4; font-weight: 700; }
.button-outline:hover,
.header-cta:hover { background-color: #241d0f; }

.button-compact,
.header-cta {
  min-height: 40px;
  padding: 7px 14px;
  gap: 10px;
  font-size: 13px;
}

.header-cta { color: var(--control-gold); white-space: nowrap; }
.menu-toggle { border-radius: var(--control-radius); }

.button:focus-visible,
.header-cta:focus-visible,
.menu-toggle:focus-visible {
  outline: 2px solid var(--control-focus);
  outline-offset: 4px;
  border-radius: var(--control-radius);
}

.hero-actions,
.dev-actions {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

/* Shared contact scene for Home and AI for business. */
.contact-section {
  --contact-landscape-height: 100%;
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-block-size: 736px;
  padding-block: 36px;
  border-block-start: 1px solid #92722c;
  background: #030505;
}

.contact-landscape,
.contact-section::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  inline-size: 100%;
  block-size: var(--contact-landscape-height);
  pointer-events: none;
}

.contact-landscape {
  z-index: -2;
  object-fit: cover;
  object-position: center 65%;
}

.contact-section::before {
  content: '';
  z-index: -1;
  background: linear-gradient(180deg, #030505b8 0%, #03050577 42%, transparent 78%),
    linear-gradient(90deg, #03050577, transparent 62%, #03050522);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 3.3vw, 48px);
}

.contact-layout > .project-form { align-self: center; }
.contact-intro { min-inline-size: 0; }

.contact-intro h2 {
  font-size: clamp(36px, 3.3vw, 50px);
  line-height: 1.1;
  letter-spacing: -.016em;
  text-wrap: balance;
}

.contact-description {
  max-inline-size: 48ch;
  margin-block-start: 15px;
  font-size: 18px;
  line-height: 1.5;
  color: #e2e3df;
}

.contact-intro address {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-block-start: 30px;
}

.contact-intro address a {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-inline-size: 100%;
  font-size: 17px;
  font-weight: 500;
}

.contact-intro address .icon { width: 34px; height: 34px; }
.contact-intro address a:hover span { text-decoration: underline; text-underline-offset: 5px; }

.project-form {
  --form-frame: #b89032;
  align-self: start;
  display: grid;
  gap: 13px;
  width: 100%;
  max-width: 760px;
  min-width: 0;
  padding: 22px 24px 18px;
  border: 1px solid var(--form-frame);
  border-radius: 14px;
  background-color: #11191d;
  container-type: inline-size;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field {
  display: block;
  min-width: 0;
  color: #f1f3f4;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.required { color: var(--control-gold); }

.field input,
.field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 6px;
  border: 1px solid #78868a;
  border-radius: 5px;
  background-color: #151d20;
  color: #f1f3f4;
  padding: 9px 11px;
  font-size: 16px;
  line-height: 1.4;
}

.field input { height: 44px; }
.field textarea { min-height: 96px; resize: vertical; }

.field input::placeholder,
.field textarea::placeholder {
  color: #b6bfc1;
  opacity: 1;
  font-weight: 400;
}

.field input:hover,
.field textarea:hover { box-shadow: 0 0 0 1px #d5b654; }

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--control-focus);
  outline-offset: 2px;
}

.field input[aria-invalid="true"]:not(:focus),
.field textarea[aria-invalid="true"]:not(:focus) {
  outline: 1px solid #ffba9f;
  outline-offset: 1px;
}

.confidential-note,
.local-notice,
.consent {
  font-size: 12px;
  line-height: 1.5;
  color: #dce0df;
}

.confidential-note { margin-top: -5px; }

.form-options { border-top: 1px solid #92722c88; }

.form-options legend {
  color: var(--control-gold);
  padding-inline-end: 9px;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 800;
}

.form-options .form-row { margin-bottom: 11px; }

.service-choices legend {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.service-choices > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.service-choices label { position: relative; min-width: 0; cursor: pointer; }
.service-choices input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }

.service-choices label span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  height: 100%;
  padding: 6px 9px;
  border: 1px solid #78868a;
  border-radius: var(--control-radius);
  background-color: #10191d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.service-choices input:checked + span {
  border-color: var(--control-gold);
  background-color: #372b14;
  color: var(--control-focus);
}

.service-choices input:focus-visible + span {
  outline: 2px solid var(--control-focus);
  outline-offset: 3px;
}

.service-choices input[aria-invalid="true"]:not(:focus) + span { border-color: #ffba9f; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}

.consent input {
  width: 19px;
  height: 19px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--control-gold);
}

.submit-button { width: 100%; }

.form-status {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Keep the live region in the accessibility tree when it has no message. */
.form-status:empty { margin-top: -13px; }
.form-status:focus { outline: 2px solid var(--control-focus); outline-offset: 4px; }
.form-status[data-state="success"] { color: #dbeaaf; }
.form-status[data-state="error"] { color: #ffba9f; }
.form-status[data-state="pending"] { color: #ffe18c; }

.app-unavailable a { text-decoration: underline; text-underline-offset: 3px; }
html[data-app-ready="true"] .app-unavailable { display: none; }

@supports (border-image-source: url('/assets/web/ia-empresas/v1/surfaces/panel-charcoal.svg')) {
  .project-form {
    background: none;
    border-image: url('/assets/web/ia-empresas/v1/surfaces/panel-charcoal.svg') 40 fill / 16px / 0 stretch;
    outline: 1px solid var(--form-frame);
    outline-offset: -1px;
  }

  .field input,
  .field textarea {
    background: none;
    border-image: url('/assets/web/ia-empresas/v1/surfaces/field-charcoal.svg') 30 fill / 9px / 0 stretch;
  }
}

@container (max-width: 395px) {
  .form-row { grid-template-columns: minmax(0, 1fr); gap: 11px; }
}

@media (max-width: 1279px) {
  .header-cta { margin-left: auto; }
}

@media (min-width: 1024px) {
  .contact-intro { translate: 0 -20px; }
}

@media (max-width: 1023px) {
  .contact-section {
    --contact-landscape-height: clamp(360px, 48vw, 480px);
    min-block-size: 0;
    padding-block: 38px 28px;
  }
  .contact-layout { grid-template-columns: minmax(0, 1fr); max-inline-size: 700px; gap: 28px; }
  .contact-intro h2 { font-size: clamp(34px, 5vw, 44px); }
  .contact-description { font-size: 17px; }
  .contact-landscape { object-position: 57% center; }
  .contact-section::before {
    background: linear-gradient(180deg, #03050599 0%, #03050599 54%, #030505 100%);
  }
}

@media (max-width: 767px) {
  .header-cta { display: none; }
  .hero-actions,
  .dev-actions { flex-direction: column; width: fit-content; max-width: 100%; }
  .button:not(.button-compact) { padding-inline: 16px; }
  .contact-intro address { gap: 12px; margin-block-start: 24px; }
  .contact-intro address a { font-size: 15px; gap: 12px; }
  .contact-intro address .icon { width: 30px; height: 30px; }
  .project-form { padding: 18px 16px 16px; }
}

@media (forced-colors: active) {
  .contact-section { background: Canvas; border-block-start-color: CanvasText; }
  .contact-landscape, .contact-section::before { display: none; }
  .button,
  .header-cta,
  .project-form,
  .field input,
  .field textarea {
    background: Canvas;
    border: 1px solid ButtonText;
    border-image: none;
    color: CanvasText;
  }
  .project-form { outline: none; }
}

.consent a,.footer-bottom a{text-decoration:underline;text-underline-offset:2px}