/* ============================================================
   ÍTALA & VINÍCIUS — Guia dos Convidados (WEB · mobile-first)
   Identidade warm/light do site · fotos reais dos locais
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Tangerine:wght@400;700&display=swap');

:root{
  --cream:#FBF6EC; --sand:#F2E9D7; --sand-deep:#EADFC8; --edge:#E3D7BF;
  --ink:#43302A; --ink-soft:#7C675B;
  --gold:#A88A55; --gold-soft:#C8B084;
  --wine:#3E2724; --wine-soft:#5A3A34;
  --on-dark:#F8EFDD; --on-dark-soft:#D8C3AE;

  --display:'Playfair Display', Georgia, serif;
  --serif:'Montserrat', system-ui, sans-serif;
  --amp:'Tangerine','Brush Script MT', cursive;

  --radius:3px;
  --photo:grayscale(1) sepia(.07) contrast(1.04) brightness(1.02);
  --shadow-soft:0 16px 40px -28px rgba(67,48,42,.42);
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{ margin:0; font-family:var(--serif); font-size:16px; line-height:1.6; color:var(--ink); background:var(--cream); }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; margin:0; line-height:1.12; }
p{ margin:0 0 1em; }

.amp{ font-family:var(--amp); font-weight:700; color:var(--gold); font-style:normal; }
.wrap{ width:100%; max-width:1120px; margin:0 auto; padding:0 20px; }
section[id]{ scroll-margin-top:64px; }
.label{ font-family:var(--serif); font-weight:600; font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }

/* ============================ TOPO ============================ */
.topbar{ position:sticky; top:0; z-index:30; background:rgba(251,246,236,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--edge); }
.topbar__in{ position:relative; max-width:1120px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:center; gap:14px; }
.topbar__logo{ font-family:var(--display); font-size:17px; color:var(--ink); white-space:nowrap; }
.topbar__logo .amp{ font-size:22px; }
.topbar__nav{ display:none; gap:20px; position:absolute; right:20px; top:50%; transform:translateY(-50%); }
.topbar__nav a{ font-family:var(--serif); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.topbar__nav a:active{ color:var(--gold); }

/* ============================ HERO ============================ */
.hero{ position:relative; min-height:82vh; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; }
.hero__img{ position:absolute; inset:0; }
.hero__img img{ width:100%; height:100%; object-fit:cover; object-position:28% center; filter:var(--photo); }
@media (min-width:980px){ .hero__img img{ object-position:center; } }
.hero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(62,39,36,.30) 0%, rgba(62,39,36,.34) 45%, rgba(62,39,36,.66) 100%); }
.hero__inner{ position:relative; z-index:2; color:var(--on-dark); padding:0 22px; width:100%; }
.hero__title{ font-family:var(--display); font-weight:600; color:#fff; font-size:clamp(38px,12vw,72px); line-height:1.02; text-transform:uppercase; letter-spacing:.03em; }
.hero__title small{ display:block; font-size:.34em; letter-spacing:.42em; font-weight:500; color:var(--on-dark-soft); text-transform:uppercase; margin-bottom:14px; font-family:var(--serif); }
.hero__couple{ margin-top:20px; font-family:var(--display); font-size:clamp(20px,6vw,30px); color:var(--on-dark); }
.hero__couple .amp{ font-size:1.5em; color:var(--gold-soft); }
.hero__rule{ width:54px; height:1px; background:var(--gold-soft); border:0; margin:18px auto 0; }

/* ======================= cabeçalho de seção ======================= */
.section{ padding:56px 0; }
.section--sand{ background:var(--sand); }
.sec-head{ text-align:center; margin-bottom:34px; }
.orn-sm{ width:150px; margin:0 auto 16px; display:block; opacity:.9; }
.sec-head .label{ display:block; margin-bottom:10px; }
.sec-head h2{ font-size:clamp(28px,8vw,42px); text-transform:uppercase; letter-spacing:.06em; }
.sec-head .script{ display:block; font-family:var(--display); font-style:italic; color:var(--gold); font-size:clamp(18px,5vw,25px); margin-top:6px; }
.sec-head p{ margin:14px auto 0; color:var(--ink-soft); max-width:620px; font-size:14.5px; }

/* ======================= AEROPORTOS ======================= */
.air{ display:flex; flex-direction:column; gap:14px; max-width:820px; margin:0 auto; }
.air__card{ display:flex; align-items:center; gap:16px; border:1px solid var(--edge); border-left:3px solid var(--gold); border-radius:var(--radius); background:#fff; padding:18px 18px; flex-wrap:wrap; }
.air__rank{ font-family:var(--display); font-size:26px; color:var(--gold-soft); font-weight:600; min-width:38px; text-align:center; }
.air__body{ flex:1; min-width:150px; }
.air__body h3{ font-size:18px; margin-bottom:2px; }
.air__body p{ font-size:13px; color:var(--ink-soft); margin:0; }
.air__nums{ text-align:right; }
.air__km{ font-family:var(--display); font-size:20px; color:var(--ink); }
.air__time{ font-family:var(--serif); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-top:1px; }
.air__tip{ margin:22px auto 0; text-align:center; font-family:var(--display); font-style:italic; color:var(--ink-soft); max-width:640px; font-size:14.5px; }

/* ======================= GRID DE CARDS ======================= */
.cards{ display:grid; grid-template-columns:1fr; gap:18px; }

.card{ border:1px solid var(--edge); border-radius:var(--radius); background:#fff; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-soft); }

/* card com foto (hotéis + restaurantes) */
.card__photo{ position:relative; aspect-ratio:16/10; background:var(--sand-deep); overflow:hidden; }
.card__photo img{ width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(1.06) contrast(1.02); }
.card__photo.broken{ display:none; }
.card__photo::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 -60px 60px -50px rgba(62,39,36,.4); pointer-events:none; }

.card__body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.card__cat{ font-family:var(--serif); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:5px; }
.card__body h3{ font-size:20px; margin:0 0 6px; line-height:1.14; }
.card__desc{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; flex:1; margin:0 0 14px; }
.card__links{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.card__link{ font-family:var(--serif); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--gold); display:inline-flex; align-items:center; gap:5px; }
.card__link svg{ width:13px; height:13px; fill:currentColor; }
.card__link + .card__link{ border-left:1px solid var(--sand-deep); padding-left:16px; }

/* card texto-only (cafés + gelaterias) */
.card--text{ padding:22px 20px; }
.card--text .card__cat{ margin-bottom:6px; }
.card--text h3{ font-size:21px; margin:0 0 7px; }
.tcards{ display:grid; grid-template-columns:1fr; gap:16px; max-width:760px; margin:0 auto; }

/* ======================= RODAPÉ ======================= */
.footer{ background:var(--wine); color:var(--on-dark); text-align:center; padding:52px 22px; }
.footer .orn-foot{ width:170px; margin:0 auto 18px; opacity:.9; }
.footer__names{ font-family:var(--display); font-size:30px; color:#fff; }
.footer__names .amp{ font-size:40px; color:var(--gold-soft); }
.footer__meta{ margin-top:12px; font-family:var(--serif); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--on-dark-soft); line-height:2; }

/* ============================================================
   BREAKPOINTS (mobile-first → escala)
   ============================================================ */
@media (min-width:600px){
  .cards{ grid-template-columns:1fr 1fr; gap:20px; }
  .air__card{ flex-wrap:nowrap; }
  .air__nums{ min-width:110px; }
}
@media (min-width:760px){
  body{ font-size:16px; }
  .hero{ min-height:100vh; }
  .section{ padding:74px 0; }
  .sec-head{ margin-bottom:44px; }
  .tcards{ grid-template-columns:1fr 1fr 1fr; }
}
@media (min-width:960px){
  .cards{ grid-template-columns:1fr 1fr 1fr; gap:24px; }
}