/* Naditas — Kids Swimwear Manufacturer. Shared stylesheet. */
:root{
  --teal:#0e7c7b;
  --teal-dark:#0a5f5e;
  --teal-darker:#084c4b;
  --teal-50:#eefaf9;
  --teal-100:#d7f0ee;
  --ink:#1f2a2a;
  --muted:#5b6b6b;
  --sand:#faf7f1;
  --coral:#e8634f;
  --coral-dark:#c94f3c;
  --line:#e3e9e9;
  --white:#ffffff;
  --radius:12px;
  --maxw:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);line-height:1.65;background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--teal-dark);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
/* ---------- header ---------- */
.site-header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:38px;height:38px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;flex:none}
.brand-name{font-size:1.45rem;font-weight:800;color:var(--teal-darker);letter-spacing:.5px;line-height:1.1}
.brand-tag{display:block;font-size:.68rem;font-weight:600;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase}
.main-nav{display:flex;align-items:center;gap:26px}
.main-nav a{font-weight:600;font-size:.95rem;color:var(--ink)}
.main-nav a:hover{color:var(--teal-dark);text-decoration:none}
.main-nav a.active{color:var(--teal-dark);border-bottom:2px solid var(--teal)}
.header-actions{display:flex;align-items:center;gap:14px}
.lang-switch{font-size:.85rem;font-weight:600}
.lang-switch a{color:var(--muted);padding:4px 6px}
.lang-switch a.current{color:var(--teal-dark);border-bottom:2px solid var(--teal)}
.lang-switch span{color:var(--line)}
.btn{display:inline-block;background:var(--coral);color:#fff;font-weight:700;padding:12px 26px;border-radius:8px;border:none;cursor:pointer;font-size:1rem}
.btn:hover{background:var(--coral-dark);color:#fff;text-decoration:none}
.btn-teal{background:var(--teal)}
.btn-teal:hover{background:var(--teal-dark)}
.btn-outline{background:transparent;color:var(--teal-dark);border:2px solid var(--teal)}
.btn-outline:hover{background:var(--teal-50);color:var(--teal-dark);text-decoration:none}
.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:1.2rem;cursor:pointer;color:var(--ink)}
/* ---------- hero ---------- */
.hero{background:var(--teal-darker);color:#fff;padding:72px 0}
.hero .eyebrow{color:var(--teal-100);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.8rem;margin-bottom:14px}
.hero h1{font-size:2.5rem;line-height:1.2;margin-bottom:16px;max-width:760px}
.hero p.lead{font-size:1.15rem;color:#e6f4f3;max-width:680px;margin-bottom:28px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-meta{margin-top:22px;font-size:.95rem;color:var(--teal-100)}
.hero-meta strong{color:#fff}
/* ---------- stats ---------- */
.stats{background:var(--white);border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--maxw);margin:0 auto}
.stat{padding:28px 20px;text-align:center;border-left:1px solid var(--line)}
.stat:first-child{border-left:none}
.stat-num{font-size:1.9rem;font-weight:800;color:var(--teal-dark)}
.stat-label{font-size:.9rem;color:var(--muted);margin-top:4px}
/* ---------- sections ---------- */
.section{padding:64px 0}
.section.alt{background:var(--sand)}
.section.teal-soft{background:var(--teal-50)}
.section h2{font-size:1.9rem;margin-bottom:10px;color:var(--teal-darker)}
.section .sub{color:var(--muted);max-width:720px;margin-bottom:36px;font-size:1.05rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:box-shadow .2s}
.card:hover{box-shadow:0 8px 24px rgba(8,76,75,.10)}
.card h3{font-size:1.2rem;margin:14px 0 8px;color:var(--ink)}
.card p{color:var(--muted);font-size:.96rem;margin-bottom:14px}
.card .icon{width:48px;height:48px;border-radius:12px;background:var(--teal-50);display:flex;align-items:center;justify-content:center}
.card .go{font-weight:700;color:var(--teal-dark)}
.photo-slot{border:2px dashed var(--line);border-radius:var(--radius);background:var(--sand);color:var(--muted);text-align:center;padding:44px 20px;font-size:.9rem}
/* ---------- page hero (inner pages) ---------- */
.page-hero{background:var(--teal-darker);color:#fff;padding:52px 0}
.page-hero h1{font-size:2.1rem;margin-bottom:10px}
.page-hero p{color:#e6f4f3;max-width:760px;font-size:1.08rem}
.breadcrumb{font-size:.85rem;color:var(--teal-100);margin-bottom:12px}
.breadcrumb a{color:#fff}
/* ---------- process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:step}
.steps.four{grid-template-columns:repeat(4,1fr)}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:relative}
.step-num{width:40px;height:40px;border-radius:50%;background:var(--teal);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.step h3{font-size:1.05rem;margin-bottom:8px}
.step p{font-size:.92rem;color:var(--muted)}
.step .time{display:inline-block;margin-top:10px;font-size:.8rem;font-weight:700;color:var(--teal-dark);background:var(--teal-50);padding:3px 10px;border-radius:20px}
/* ---------- specs table ---------- */
.spec-table{width:100%;border-collapse:collapse;margin:20px 0;background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.spec-table th,.spec-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:.95rem}
.spec-table th{background:var(--teal-50);color:var(--teal-darker);width:32%}
/* ---------- faq ---------- */
.faq{max-width:820px}
.faq details{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;background:#fff}
.faq summary{padding:16px 20px;font-weight:700;cursor:pointer;color:var(--teal-darker)}
.faq details p{padding:0 20px 18px;color:var(--muted)}
/* ---------- cta band ---------- */
.cta-band{background:var(--teal);color:#fff;padding:56px 0;text-align:center}
.cta-band h2{color:#fff;margin-bottom:10px}
.cta-band p{color:#e6f4f3;max-width:640px;margin:0 auto 26px}
/* ---------- forms ---------- */
.form-wrap{max-width:720px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:36px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:4px}
.field.full{grid-column:1/-1}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font-size:1rem;font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--teal-100);border-color:var(--teal)}
.field .hint{font-size:.82rem;color:var(--muted);margin-top:4px}
.contact-side h3{margin-bottom:8px;color:var(--teal-darker)}
.contact-side p{color:var(--muted);margin-bottom:16px}
/* ---------- footer ---------- */
.site-footer{background:var(--teal-darker);color:#cfe8e7;padding:56px 0 0;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;max-width:var(--maxw);margin:0 auto;padding:0 20px 40px}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:14px}
.site-footer a{color:#cfe8e7;font-size:.93rem}
.site-footer a:hover{color:#fff}
.footer-links{list-style:none}
.footer-links li{margin-bottom:8px}
.footer-brand{font-size:1.3rem;font-weight:800;color:#fff;margin-bottom:8px}
.footer-note{font-size:.88rem;color:#a9cfcd;margin-top:10px;max-width:300px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding:20px;text-align:center;font-size:.85rem;color:#a9cfcd}
.footer-bottom a{color:#cfe8e7}
/* ---------- blog ---------- */
.post-list{display:grid;gap:20px;max-width:860px}
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.post-card h2{font-size:1.35rem;margin-bottom:8px}
.post-card .meta{font-size:.85rem;color:var(--muted);margin-bottom:10px}
.post-card p{color:var(--muted);margin-bottom:12px}
.article{max-width:800px}
.article h2{margin:32px 0 12px;font-size:1.5rem}
.article h3{margin:24px 0 10px;font-size:1.2rem;color:var(--teal-darker)}
.article p,.article li{color:#334242;margin-bottom:12px}
.article ul{padding-left:22px}
/* ---------- responsive ---------- */
@media(max-width:900px){
  .cards{grid-template-columns:1fr 1fr}
  .steps,.steps.four{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:none}
  .stat{border-top:1px solid var(--line)}
  .stat:nth-child(1),.stat:nth-child(2){border-top:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .menu-toggle{display:block}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:10px 20px 20px;border-bottom:1px solid var(--line);gap:0}
  .main-nav.open{display:flex}
  .main-nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .site-header{position:sticky}
  .header-inner{flex-wrap:wrap}
}
@media(max-width:600px){
  .cards{grid-template-columns:1fr}
  .steps,.steps.four{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .hero h1{font-size:1.9rem}
  .footer-grid{grid-template-columns:1fr}
}