/* ============================================================
   Maillots a medida confeccionados en Galicia
   Estilos compartidos (index + fichas de producto)
   ============================================================ */

:root{
  --crudo:#EFE6D6;
  --tarjeta:#FBF5EB;
  --tarjeta-input:#FFFCF6;
  --terracota:#BC6F4F;
  --terracota-osc:#A85C3D;
  --sage:#94A186;
  --sage-osc:#7A9268;
  --texto:#3B322A;
  --texto-2:#7A6E60;
  --borde:#E6DBC8;
  --borde-input:#E3D8C7;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--crudo);
  -webkit-font-smoothing:antialiased;
  font-family:'Nunito Sans', sans-serif;
  color:var(--texto);
}
input::placeholder{ color:#B3A794; }

/* Entrada suave: solo transform, el contenido nunca queda en blanco */
@keyframes fadeUp{ from{ transform:translateY(26px); } to{ transform:none; } }
.fadeUp{ animation:fadeUp 1s cubic-bezier(.16,1,.3,1) both; }

.page{ min-height:100vh; background:var(--crudo); padding-bottom:120px; overflow-x:hidden; }
.wrap{ max-width:500px; margin:0 auto; padding:0 22px; }

/* ---------------- Tipografía de apoyo ---------------- */
.eyebrow{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--sage); font-weight:700; }
.sec-head{ text-align:center; margin-bottom:30px; }
.sec-title{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:30px; margin:8px 0 0; color:var(--texto); }

/* ---------------- HERO ---------------- */
.hero{ padding:64px 0 40px; text-align:center; }
.hero h1{
  font-family:'Cormorant Garamond', serif; font-weight:600;
  font-size:clamp(24px, 6.6vw, 38px);
  line-height:1.12; letter-spacing:-.01em; margin:0 0 18px; color:var(--texto);
}
.hero p{ font-size:16.5px; line-height:1.65; color:var(--texto-2); margin:0 auto; max-width:380px; }

/* ---------------- Tarjetas de modelo (home) ---------------- */
.cards{ display:flex; flex-direction:column; gap:18px; }
.model-card{
  display:flex; background:var(--tarjeta); border-radius:20px; overflow:hidden;
  border:1px solid var(--borde); box-shadow:0 6px 22px rgba(120,100,70,.07);
  cursor:pointer; text-align:left; width:100%; text-decoration:none; color:inherit;
  transition:box-shadow .4s ease;
}
.model-card:hover{ box-shadow:0 16px 38px rgba(120,100,70,.16); }
.model-card .thumb{ position:relative; flex:none; width:144px; height:216px; }
.model-card .thumb img{ display:block; width:144px; height:216px; object-fit:cover; background:#fff; }
.price-badge{
  position:absolute; left:10px; bottom:10px; background:rgba(251,245,235,.94);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); color:var(--terracota-osc);
  font-weight:700; font-size:14px; padding:5px 12px; border-radius:999px;
  box-shadow:0 3px 10px rgba(90,70,45,.18);
}
.card-body{ flex:1; padding:18px 18px 18px 20px; display:flex; flex-direction:column; justify-content:center; }
.card-name{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:26px; margin:0 0 14px; color:var(--texto); line-height:1; }
.card-link{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; align-self:flex-start;
  padding:11px 20px; border-radius:999px; border:1.6px solid var(--terracota);
  font-size:15px; font-weight:700; color:var(--terracota); letter-spacing:.01em;
  transition:background .25s ease, color .25s ease;
}
.model-card:hover .card-link{ background:var(--terracota); color:#FFF7F0; }
.model-card:hover .card-link svg path{ stroke:#FFF7F0; }
.note{ font-size:12.5px; line-height:1.55; color:#A1937F; text-align:center; margin:20px 4px 0; font-style:italic; }

/* ---------------- Cómo funciona ---------------- */
.steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.step{ display:flex; gap:18px; align-items:flex-start; }
.step-num{
  flex:none; width:44px; height:44px; border-radius:50%; border:1.4px solid #C9A98C;
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; color:var(--terracota);
}
.step p{ margin:0; font-size:15.5px; line-height:1.55; color:#4A4138; padding-top:4px; }

/* ---------------- Pie ---------------- */
.site-footer{ padding:50px 0 24px; text-align:center; }
.footer-quote{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:19px; color:#6B5F50; margin:0; line-height:1.5; }

/* ---------------- Botón flotante de ayuda ---------------- */
.help-fab{
  position:fixed; left:50%; transform:translateX(-50%); bottom:22px; z-index:50;
  display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:999px;
  background:var(--tarjeta); border:1.5px solid #C9A98C; color:#7A5A44;
  font-family:'Nunito Sans',sans-serif; font-size:14.5px; font-weight:600; text-decoration:none;
  box-shadow:0 8px 24px rgba(90,70,45,.18); white-space:nowrap;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.help-fab:hover{ transform:translateX(-50%) translateY(-3px); box-shadow:0 14px 30px rgba(90,70,45,.24); }

/* ============================================================
   FICHA DE PRODUCTO
   ============================================================ */
.back-btn{
  display:inline-flex; align-items:center; gap:7px; margin:8px 0 16px;
  padding:9px 14px 9px 11px; border:none; background:transparent; color:var(--texto-2);
  font-family:'Nunito Sans',sans-serif; font-size:14.5px; font-weight:600; text-decoration:none;
  cursor:pointer; border-radius:999px; transition:background .2s ease;
}
.back-btn:hover{ background:rgba(188,111,79,.08); }

/* ---- Carrusel ---- */
.carwrap{ position:relative; }
.carousel{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; border-radius:22px;
  background:var(--tarjeta); border:1px solid var(--borde); box-shadow:0 10px 30px rgba(120,100,70,.10);
  scrollbar-width:none; -ms-overflow-style:none;
}
.carousel::-webkit-scrollbar{ display:none; }
.pcar-slide{ position:relative; flex:none; width:100%; padding-bottom:150%; scroll-snap-align:center; }
.pcar-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#fff; }

.car-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%;
  border:none; background:rgba(251,245,235,.92); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 3px 12px rgba(90,70,45,.18); transition:transform .2s ease;
}
.car-arrow.prev{ left:12px; }
.car-arrow.next{ right:12px; }
.car-arrow:hover{ transform:translateY(-50%) scale(1.06); }

.dots{ display:flex; justify-content:center; gap:8px; margin:16px 0 4px; }
.dot-btn{ width:8px; height:8px; border-radius:50%; border:none; padding:0; cursor:pointer; transition:all .25s ease; background:#D6C7B2; }
.dot-btn.active{ width:22px; border-radius:5px; background:var(--terracota); }

/* ---- Cabecera de producto ---- */
.p-head{ padding:18px 2px 0; }
.p-head-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.p-title{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:34px; line-height:1; margin:0; color:var(--texto); }
.p-price{ font-size:16px; font-weight:700; color:var(--terracota-osc); white-space:nowrap; padding-bottom:3px; }
.p-tagline{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:18px; color:var(--sage); margin:10px 0 0; }
.p-desc{ font-size:15px; line-height:1.7; color:#5A4F42; margin:18px 0 0; }

/* ---- Detalles ---- */
.detalles{ padding:26px 2px 0; }
.detalles h3{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--sage); font-weight:700; margin:0 0 14px; }
.detalles ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.detalles li{ display:flex; align-items:flex-start; gap:11px; }
.detalles li span{ font-size:14.5px; line-height:1.5; color:#4A4138; }

/* ---- Guía de tallas ---- */
.guide-wrap{ padding:30px 0 0; }
.guide-card{ background:var(--tarjeta); border:1px solid var(--borde); border-radius:20px; padding:22px 20px 24px; box-shadow:0 6px 20px rgba(120,100,70,.07); }
.guide-card h3{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:23px; margin:0 0 4px; color:var(--texto); }
.guide-card .guide-sub{ font-size:13px; color:#8A7E70; margin:0 0 18px; line-height:1.5; }
.guide-grid{ display:grid; grid-template-columns:1fr 1.4fr; font-size:13.5px; }
.guide-grid .gh{ font-weight:700; color:var(--sage); padding:0 0 10px; letter-spacing:.05em; font-size:11.5px; text-transform:uppercase; }
.guide-grid .gc{ padding:11px 0; border-top:1px solid #EBE0CE; color:#5A4F42; }
.guide-grid .gc.talla{ font-weight:700; color:var(--texto); }
.guide-btn{
  display:flex; width:100%; align-items:center; justify-content:center; gap:8px; margin-top:20px;
  padding:13px 16px; border-radius:13px; border:1.5px solid #C9A98C; background:var(--tarjeta-input);
  color:#7A5A44; font-family:'Nunito Sans',sans-serif; font-size:14px; font-weight:700; text-decoration:none;
  cursor:pointer; transition:background .2s ease, transform .2s ease;
}
.guide-btn:hover{ background:#F4E9DA; transform:translateY(-1px); }

/* ============================================================
   FORMULARIO DE PEDIDO (en cada ficha)
   ============================================================ */
.form-wrap{ padding:40px 0 16px; scroll-margin-top:16px; }
.form-card{ background:var(--tarjeta); border:1px solid var(--borde); border-radius:24px; padding:30px 22px 32px; box-shadow:0 10px 34px rgba(120,100,70,.09); }
.form-card .form-head{ text-align:center; margin-bottom:26px; }
.form-card .form-head h2{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:29px; margin:0 0 6px; color:var(--texto); }
.form-card .form-head p{ font-size:14px; color:var(--texto-2); margin:0; }

.field-label{ display:block; font-size:13px; font-weight:700; letter-spacing:.04em; color:#6B5F50; margin:0 0 9px 2px; }
.field-label.mt{ margin-top:24px; margin-bottom:11px; }

.name-input{
  width:100%; padding:15px 16px; border-radius:13px; border:1.5px solid var(--borde-input);
  background:var(--tarjeta-input); font-family:'Nunito Sans',sans-serif; font-size:16px; color:var(--texto);
  outline:none; transition:border-color .25s ease, box-shadow .25s ease;
}
.name-input:focus{ border-color:var(--terracota); box-shadow:0 0 0 3px rgba(188,111,79,.13); }

/* ---- Selector de color ---- */
.color-group{ display:flex; gap:11px; }
.color-opt{
  flex:1; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 12px; border-radius:15px; border:1.5px solid var(--borde-input);
  background:var(--tarjeta-input); cursor:pointer; transition:all .25s ease; font:inherit;
  font-size:15px; font-weight:600; color:#5A4F42;
}
.color-opt.selected{ border:1.5px solid var(--terracota); background:#F7E9DF; box-shadow:0 6px 18px rgba(188,111,79,.16); }
.color-swatch{ width:20px; height:20px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.08); }
.color-swatch.negro{ background:#2B2723; }
.color-swatch.lila{ background:#B497C9; }

/* ---- Chips de talla ---- */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.size-chip{
  min-width:52px; height:48px; padding:0 16px; border-radius:12px; border:1.5px solid var(--borde-input);
  background:var(--tarjeta-input); color:#5A4F42; font-family:'Nunito Sans',sans-serif; font-size:16px;
  font-weight:600; cursor:pointer; transition:all .2s ease;
}
.size-chip.selected{ border:1.5px solid var(--terracota); background:var(--terracota); color:#FFF7F0; box-shadow:0 5px 14px rgba(188,111,79,.22); }

/* ---- Casilla decoración ---- */
.deco-row{
  display:flex; align-items:center; gap:13px; width:100%; padding:15px 16px; border-radius:15px;
  border:1.5px solid var(--borde-input); background:var(--tarjeta-input); cursor:pointer;
  transition:all .25s ease; font:inherit; text-align:left;
}
.deco-row.selected{ border:1.5px solid var(--terracota); background:#F7E9DF; box-shadow:0 6px 18px rgba(188,111,79,.16); }
.deco-check{
  flex:none; width:24px; height:24px; border-radius:7px; border:1.5px solid #D4C6B0;
  background:#FFFCF6; display:flex; align-items:center; justify-content:center; transition:all .25s ease;
}
.deco-row.selected .deco-check{ background:var(--terracota); border-color:var(--terracota); }
.deco-check svg{ opacity:0; transition:opacity .2s ease; }
.deco-row.selected .deco-check svg{ opacity:1; }
.deco-text{ flex:1; }
.deco-text .deco-title{ font-size:14.5px; font-weight:700; color:var(--texto); }
.deco-text .deco-sub{ font-size:12.5px; color:#8A7E70; line-height:1.4; margin-top:2px; }
.deco-price{ font-size:14px; font-weight:700; color:var(--terracota); white-space:nowrap; }

/* ---- Total ---- */
.total-row{
  display:flex; align-items:baseline; justify-content:space-between; margin-top:26px;
  padding:16px 18px; border-radius:15px; background:#F3EADB; border:1px dashed #D9C8AE;
}
.total-row .total-label{ font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#6B5F50; }
.total-row .total-amount{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:30px; color:var(--terracota-osc); line-height:1; }

/* ---- Botón confirmar ---- */
.confirm-btn{
  width:100%; margin-top:16px; padding:17px; border-radius:15px; border:none;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Nunito Sans',sans-serif; font-size:16.5px; font-weight:700; transition:all .3s ease;
  background:#E4DBCB; color:#A89B88; cursor:not-allowed; box-shadow:none;
}
.confirm-btn.ready{ background:var(--sage-osc); color:#FFFDF8; cursor:pointer; box-shadow:0 8px 22px rgba(122,146,104,.32); }
.hint{ font-size:11.5px; color:#A1937F; text-align:center; margin:13px 6px 0; line-height:1.5; }