/* SEV-21C — Contacto / Cotización
   A+ Petróleo Editorial, conversión compacta. No guides.css. */

.page-contacto{
  --ct-ink:#e8f3f3;
  --ct-muted:#9eb8bb;
}

.page-contacto .site-breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 12px;font-size:13px;line-height:1.4;color:#8eaaad;
}
.page-contacto .site-breadcrumb a{color:#9eb8bb;text-decoration:none}
.page-contacto .site-breadcrumb a:hover,
.page-contacto .site-breadcrumb a:focus-visible{color:#efffff}
.page-contacto .site-breadcrumb .bc-sep{opacity:.55;user-select:none}
.page-contacto .site-breadcrumb [aria-current="page"]{color:#d5e6e6}

.page-contacto .footer-brand-block .brand{color:#fff;text-decoration:none}
.page-contacto .footer-brand-block .brand:hover{color:#7de0e6}

/* ---------- Hero + form first viewport ---------- */
.page-contacto .hero-ct{
  min-height:0;padding:0;overflow:visible;position:relative;
}
.page-contacto .hero-ct .hero-shade{
  background:
    radial-gradient(ellipse at 18% 20%,rgba(37,188,194,.14),transparent 42%),
    linear-gradient(180deg,#02171e 0%,#031c23 55%,#04252d 100%);
}
.page-contacto .hero-ct .hero-photo{display:none}
.page-contacto .hero-ct-layout{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:28px 36px;align-items:start;position:relative;z-index:2;
  width:100%;max-width:var(--content-max);margin:0 auto;
  padding:28px var(--content-gutter) 36px;
}
.page-contacto .hero-ct .hero-content{max-width:34rem;padding-top:8px}
.page-contacto .hero-ct h1{
  font-size:clamp(28px,3vw,40px);line-height:1.12;
  letter-spacing:-.035em;margin:0 0 12px;font-weight:670;color:#efffff;
}
.page-contacto .hero-ct .hero-copy{
  margin:0 0 10px;font-size:15.5px;line-height:1.6;color:#b7cecf;max-width:40em;
}
.page-contacto .hero-ct .hero-list{
  margin:8px 0 12px;padding:0 0 0 1.1em;color:#c5dcdc;font-size:14.5px;line-height:1.5;
}
.page-contacto .hero-ct .hero-list li{margin:0 0 3px}
.page-contacto .hero-ct .hero-note{
  margin:12px 0 0;padding:11px 13px;border-left:3px solid #25bcc2;
  background:rgba(37,188,194,.1);color:#d5e6e6;font-size:14.5px;line-height:1.5;max-width:38em;
}
.page-contacto .hero-ct .hero-mobile-actions{display:none;margin-top:16px;gap:10px;flex-wrap:wrap}
.page-contacto .btn-wa{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border-radius:5px;font-weight:700;font-size:14.5px;text-decoration:none;
  color:#0a5962;border:1px solid rgba(10,89,98,.35);background:transparent;
}
.page-contacto .btn-wa:hover{border-color:#0a5962;background:rgba(37,188,194,.08)}
.page-contacto .hero-ct .btn-wa{color:#7de0e6;border-color:rgba(125,224,230,.45)}
.page-contacto .hero-ct .btn-wa:hover{color:#efffff;border-color:#7de0e6;background:rgba(37,188,194,.12)}

/* Form panel in hero */
.page-contacto .ct-form-panel{
  margin:0;padding:18px 18px 16px;border-radius:10px;
  background:linear-gradient(180deg,#f7fbfb,#eef5f4);
  border:1px solid rgba(185,214,216,.22);
  box-shadow:0 22px 48px rgba(0,0,0,.28);
  position:relative;
}
.page-contacto .ct-form-panel:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,#25bcc2,#0697a1);border-radius:10px 0 0 10px;
}
.page-contacto .ct-form-panel .quote-form{
  background:transparent;box-shadow:none;padding:0;margin:0;border:none;
}
.page-contacto .ct-form-panel .quote-form:before{display:none}
.page-contacto .ct-form-panel .form-grid{
  gap:10px 12px;
}
.page-contacto .ct-form-panel .field-label{font-size:12.5px}
.page-contacto .ct-form-panel .form-grid input,
.page-contacto .ct-form-panel .form-grid select,
.page-contacto .ct-form-panel .form-grid textarea{
  padding:10px 12px;font-size:14.5px;min-height:42px;
}
.page-contacto .ct-form-panel .form-grid textarea{min-height:72px;resize:vertical}
.page-contacto .ct-form-panel .submit-btn{margin-top:4px;width:100%}
.page-contacto .ct-form-panel .form-note,
.page-contacto .ct-form-panel .form-privacy{font-size:12.5px;margin:8px 0 0}
.page-contacto .ct-form-kicker{
  margin:0 0 10px;font-size:11px;letter-spacing:.14em;font-weight:750;
  text-transform:uppercase;color:#0697a1;
}

/* ---------- Bands ---------- */
.page-contacto .ct-band{padding:36px 0 40px}
.page-contacto .ct-band--tint{
  background:linear-gradient(90deg,#c9d7d5 0%,#d5dbd6 55%,#ccd9d5 100%);
}
.page-contacto .ct-band--soft{background:#e8efee}
.page-contacto .ct-band--petrol{
  background:
    radial-gradient(ellipse at 80% 20%,rgba(37,188,194,.12),transparent 40%),
    linear-gradient(180deg,#031d24 0%,#021820 100%);
  color:#d5e6e6;
}
.page-contacto .ct-band--petrol .ct-h2,
.page-contacto .ct-band--petrol h2{color:#eef6f5}
.page-contacto .ct-band--petrol .ct-copy,
.page-contacto .ct-band--petrol p{color:#b7cecf}
.page-contacto .ct-band--petrol .ct-eyebrow{color:#7de0e6}
.page-contacto .ct-band--petrol .ct-sub{color:#9eb8bb}
.page-contacto .ct-band--petrol .ct-list li{color:#c5dcdc}
.page-contacto .ct-band--petrol a{color:#7de0e6}
.page-contacto .ct-band--petrol a:hover{color:#efffff}
.page-contacto .ct-band--petrol .ct-note{
  background:rgba(37,188,194,.1);color:#d5e6e6;border-left-color:#25bcc2;
}

.page-contacto .ct-eyebrow{
  margin:0 0 8px;font-size:12px;letter-spacing:.14em;font-weight:700;
  text-transform:uppercase;color:#0b6c74;
}
.page-contacto .ct-h2,
.page-contacto .ct-band h2{
  margin:0 0 12px;font-size:clamp(22px,2.4vw,30px);
  line-height:1.18;font-weight:720;letter-spacing:-.03em;color:var(--text);max-width:22ch;
}
.page-contacto .ct-sub{
  margin:0 0 12px;font-size:16.5px;line-height:1.4;font-weight:560;color:#2f4c52;max-width:40ch;
}
.page-contacto .ct-copy{
  margin:0 0 10px;font-size:15.5px;line-height:1.6;color:#3f5b61;max-width:58ch;
}
.page-contacto .ct-list{
  margin:0 0 12px;padding:0 0 0 1.15em;max-width:52ch;
  color:#3f5b61;font-size:15px;line-height:1.5;
}
.page-contacto .ct-list li{margin:0 0 4px}
.page-contacto .ct-note{
  margin:14px 0 0;padding:12px 14px;border-left:3px solid #25bcc2;
  background:rgba(37,188,194,.08);color:#25474e;font-size:15px;line-height:1.5;max-width:52ch;
}
.page-contacto .ct-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;
  color:#0a5962;font-weight:700;font-size:15px;text-decoration:none;
}
.page-contacto .ct-link:hover{color:#067a84;text-decoration:underline;text-underline-offset:3px}

/* Direct contact */
.page-contacto .ct-direct{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
.page-contacto .ct-direct-card{
  padding:18px 18px 20px;border-radius:8px;
  background:rgba(255,255,255,.42);border:1px solid rgba(13,59,67,.1);
}
.page-contacto .ct-direct-card h3{
  margin:0 0 8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:750;color:#083b43;
}
.page-contacto .ct-direct-card p{margin:0 0 10px;font-size:15px;line-height:1.45;color:#3f5b61}
.page-contacto .ct-direct-card .ct-big{
  display:block;font-size:18px;font-weight:700;color:#083b43;margin:0 0 10px;letter-spacing:-.02em;
}
.page-contacto .ct-direct-card a.btn,
.page-contacto .ct-direct-card .btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;font-size:14px;border-radius:5px;font-weight:700;text-decoration:none;
}
.page-contacto .ct-direct-card .btn-wa{
  background:transparent;color:#0a5962;border:1px solid rgba(10,89,98,.35);
}
.page-contacto .ct-direct-card .btn-wa:hover{border-color:#0a5962;background:rgba(37,188,194,.08)}
.page-contacto .ct-direct-card a.ct-mail{
  color:#0a5962;font-weight:700;text-decoration:underline;text-underline-offset:2px;
}

/* Info help grid — light, not heavy cards */
.page-contacto .ct-help{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 22px;margin-top:6px;
}
.page-contacto .ct-help-item{display:flex;gap:12px;align-items:flex-start}
.page-contacto .ct-help-icon{
  flex:0 0 28px;width:28px;height:28px;margin-top:2px;color:#0b6c74;
}
.page-contacto .ct-help-icon svg{display:block;width:28px;height:28px}
.page-contacto .ct-help-item strong{
  display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:#083b43;margin:0 0 4px;
}
.page-contacto .ct-help-item p{margin:0;font-size:14.5px;line-height:1.45;color:#3f5b61}

/* Reservation / cancel compact */
.page-contacto .ct-split{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:10px;
}
.page-contacto .ct-panel{
  padding:18px 18px 20px;border-radius:8px;
  background:rgba(255,255,255,.4);border:1px solid rgba(13,59,67,.1);
}
.page-contacto .ct-panel h3{
  margin:0 0 8px;font-size:15px;font-weight:700;color:#083b43;
}
.page-contacto .ct-panel p,.page-contacto .ct-panel ul{
  margin:0;font-size:14.5px;line-height:1.5;color:#3f5b61;
}
.page-contacto .ct-panel ul{padding:0 0 0 1.1em;margin-top:6px}
.page-contacto .ct-panel li{margin:0 0 4px}

.page-contacto .ct-cancel{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:8px;
}
.page-contacto .ct-cancel article{
  padding:16px;border-radius:8px;background:rgba(255,255,255,.38);
  border:1px solid rgba(13,59,67,.1);
}
.page-contacto .ct-cancel h3{
  margin:0 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:750;color:#083b43;
}
.page-contacto .ct-cancel p{margin:0;font-size:14.5px;line-height:1.45;color:#3f5b61}

/* Final CTA */
.page-contacto .ct-final{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
}
.page-contacto .ct-final-actions{display:flex;flex-wrap:wrap;gap:10px}

/* FAQ */
.page-contacto .ct-faq-lead{max-width:36rem;margin:0 0 16px}
.page-contacto .faq-list details{border-bottom:1px solid rgba(13,59,67,.18)}
.page-contacto .faq-list details:first-child{border-top:1px solid rgba(13,59,67,.18)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .page-contacto .hero-ct-layout{gap:22px}
  .page-contacto .ct-help{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .page-contacto .hero-ct-layout{
    grid-template-columns:1fr;padding:24px var(--content-gutter) 28px;
  }
  .page-contacto .hero-ct .hero-mobile-actions{display:flex}
  .page-contacto .ct-direct{grid-template-columns:1fr}
  .page-contacto .ct-split,
  .page-contacto .ct-cancel{grid-template-columns:1fr}
}

@media (max-width:640px){
  .page-contacto .ct-band{padding:30px 0 34px}
  .page-contacto .ct-help{grid-template-columns:1fr}
  .page-contacto .ct-form-panel{padding:16px 14px 14px}
  .page-contacto .hero-ct h1{font-size:26px}
}