/* ==========================================================
   josecabello.net · versión estática (HTML + CSS)
   Tipografías: Montserrat (títulos), PT Serif (textos), Raleway (antetítulos)
   ========================================================== */

:root {
  --navy: #29304a;
  --blue: #004d9d;
  --text: #333333;
  --muted: #54595f;
  --orange-1: #fb4c00;
  --orange-2: #fb8500;
  --orange: #f37a0c;
  --grey-bg: #f9f9f9;
  --form-bg: #f4f9fc;
  --red-bg: #fdf7f7;
  --red: #c0392b;
  --green-bg: #fbfdf7;
  --green: #2e8b3a;
  --radius: 10px;
  --shadow: 0 8px 30px rgba(41, 48, 74, .12);
  --wrap: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "PT Serif", Georgia, serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue); }

p { margin: 0 0 1em; }

h1, h2, h3 {
  font-family: "Montserrat", sans-serif;
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 .5em;
}

.wrap {
  width: min(var(--wrap), 100% - 40px);
  margin-inline: auto;
}

.narrow { width: min(820px, 100% - 40px); margin-inline: auto; }

section { padding: 90px 0; }

/* ---------- Encabezados de sección ---------- */
.kicker {
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 32px);
  color: var(--text);
  text-align: center;
  line-height: 1.3;
  margin: 0 0 .3em;
}

.title {
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 50px);
  text-transform: capitalize;
  text-align: center;
  margin-bottom: 1em;
}

.title .hl { color: var(--orange-2); }

.center { text-align: center; }

/* ---------- Botón naranja ---------- */
.btn {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.25;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, var(--orange-1) 0%, var(--orange-2) 100%);
  padding: 14px 32px;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }

.btn--lg { font-size: clamp(18px, 2vw, 26px); padding: 14px 36px; }

.cta { text-align: center; margin-top: 50px; }

/* ==========================================================
   1. HERO
   ========================================================== */
.hero {
  position: relative;
  min-height: 550px;
  padding: 60px 0;
  display: flex;
  align-items: center;
  /* Foto 2000×1100 anclada arriba: llena el ancho y nunca corta las caras (se recorta por abajo) */
  background:
    url("img/background-trans.png") right center / cover no-repeat,
    url("img/web-design1.jpg") left top / cover no-repeat,
    #fff;
  border-bottom: 6px solid var(--blue);
}

.hero::before {
  /* degradado blanco para que el texto se lea sobre la foto */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .9) 47%, #fff 54%);
}

.hero .wrap { position: relative; display: flex; justify-content: flex-end; }

.hero__content { width: min(560px, 100%); text-align: center; }

.hero h1 {
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 43px);
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: .45em;
}

.hero__sub {
  font-family: "PT Serif", serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--muted);
  line-height: 1.35;
  margin-bottom: 1.4em;
}

/* ==========================================================
   2. BENEFICIOS
   ========================================================== */
.benefits { padding: 70px 0 40px; }

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}

.benefits img { width: 90px; margin: 0 auto 18px; }

.benefits h3 { font-size: clamp(22px, 2vw, 28px); }

.benefits p { font-style: italic; font-size: 16px; color: var(--muted); }

/* ==========================================================
   3. ONDA + "¿Aún no cuentas con una web…?"
   ========================================================== */
.wave-top {
  position: relative;
  background: linear-gradient(180deg, #eef3fb 0%, #fff 320px);
}

.wave-top::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 80px;
  background: #fff;
  clip-path: ellipse(75% 100% at 50% 0%);
}

.wave-top > * { position: relative; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.split--top { align-items: start; }

.split img.photo { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }

.quote-line { font-style: italic; color: var(--muted); }

/* ==========================================================
   5. "Una web que atrae clientes" + grupos de ahorro
   ========================================================== */
.attract { padding-top: 40px; }

.group-title {
  display: table;
  margin: 70px auto 30px;
  padding: 0 20px 8px;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  background: url("img/underline.png") center bottom / 100% auto no-repeat;
}

.cards-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  width: min(900px, 100%);
  margin-inline: auto;
}

.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: center;
  padding: 0 30px 30px;
}

.card::before {
  /* barra azul superior */
  content: "";
  display: block;
  height: 22px;
  margin: 0 -30px 30px;
  background: var(--blue);
}

.card img { width: 80px; margin: 0 auto 16px; }

.card h3 { font-size: clamp(21px, 2vw, 28px); color: var(--text); }

.card p { font-style: italic; font-size: 16px; color: var(--muted); margin: 0; }

/* ==========================================================
   6. Sobre Jose
   ========================================================== */
.about__box {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 60px clamp(20px, 5vw, 70px);
}

.about__photo img.signature { width: 70%; margin: 20px auto 0; }

.press { margin-top: 60px; text-align: center; }

.press h2 {
  font-size: clamp(18px, 2vw, 25px);
  text-transform: uppercase;
}

.press img { margin: 20px auto 0; width: min(900px, 100%); }

/* ==========================================================
   7. Testimonios
   ========================================================== */
.testimonials { background: #eaf0fa; }

.testimonials .section-head {
  font-size: clamp(24px, 2.6vw, 30px);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 50px;
}

.testimonials .section-head em { font-style: normal; text-decoration: underline; text-underline-offset: 6px; }

.videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.video { text-align: center; }

.video:first-child { grid-column: 1 / -1; width: min(640px, 100%); margin-inline: auto; }

.video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #2c3a5c, #0b1b33);
  border-radius: 6px;
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.video__frame::after {
  /* botón de play */
  content: "";
  width: 70px; height: 70px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fb4c00'/%3E%3C/svg%3E") 55% center / 34px no-repeat;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}

/* vídeo de Vimeo incrustado */
.video__frame--embed { background: #000; overflow: hidden; }

.video__frame--embed::after { display: none; }

.video__frame--embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video h3 { font-family: "PT Serif", serif; color: var(--blue); font-size: 25px; margin-bottom: .1em; }

.video:first-child h3 { font-size: 35px; }

.video p { font-size: 20px; color: #3b3d3d; }

.quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 60px;
}

.quote {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 30px 28px;
  display: flex;
  flex-direction: column;
}

.quote blockquote {
  margin: 0 0 22px;
  font-style: italic;
  font-size: 17px;
  flex: 1;
}

.quote figcaption { display: flex; align-items: center; gap: 14px; }

.quote figcaption img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }

.quote strong { display: block; font-family: "Montserrat", sans-serif; color: var(--navy); }

.quote span { font-size: 15px; color: var(--muted); }

/* desplegable "ver más testimonios" sin JavaScript */
.more { margin-top: 50px; text-align: center; }

.more summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
}

.more summary::-webkit-details-marker { display: none; }

.more[open] summary { margin-bottom: 40px; }

.more .quotes { margin-top: 0; text-align: left; }

/* ==========================================================
   8. Trabajos (las capturas se desplazan al pasar el ratón)
   ========================================================== */
.works h2 {
  font-size: clamp(20px, 2vw, 25px);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 40px;
}

.works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.work {
  height: 340px;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: var(--shadow);
  background: #eee;
}

.work img {
  width: 100%;
  transform: translateY(0);
  transition: transform 6s ease-in-out;
}

.work:hover img { transform: translateY(calc(-100% + 340px)); }

/* ==========================================================
   9. ¿Cómo empezar?
   ========================================================== */
.start {
  background: var(--navy) url("img/Blue-background.jpg") center / cover no-repeat;
  color: #fff;
}

.start .kicker, .start .title { color: #fff; }

.start .title { font-size: clamp(36px, 5vw, 60px); }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  background: #fff;
  border-radius: var(--radius);
  padding: 40px 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
  color: var(--text);
  text-align: center;
}

.steps img { width: 80px; margin: 0 auto 16px; }

.steps h3 { font-size: clamp(20px, 2vw, 28px); color: var(--text); }

.steps p { font-style: italic; font-size: 16px; color: var(--muted); margin: 0; }

.start__claim {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  text-align: center;
  line-height: 1.35;
  margin: 50px auto 0;
  max-width: 900px;
}

/* ==========================================================
   10. ¿Qué puedo hacer por ti?
   ========================================================== */
.what h3.sub {
  font-size: clamp(22px, 2.2vw, 30px);
  margin-bottom: .6em;
}

.boxed {
  margin-top: 40px;
  padding: 30px 34px 14px;
  border-radius: 6px;
}

.boxed h3 { font-size: clamp(20px, 2vw, 26px); }

.boxed--red { background: var(--red-bg); border-left: 5px solid var(--red); }
.boxed--red h3 { color: var(--red); }

.boxed--green { background: var(--green-bg); border-left: 5px solid var(--green); }
.boxed--green h3 { color: var(--green); }

/* ==========================================================
   11. Qué incluye / Extras
   ========================================================== */
.includes { padding-top: 40px; }

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature {
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(41, 48, 74, .06);
  padding: 34px 26px;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}

.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.feature svg {
  width: 36px; height: 36px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 14px;
}

.feature h3 { font-size: 18px; font-weight: 600; margin-bottom: .4em; }

.feature p { font-family: "Raleway", sans-serif; font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; }

.extras-title { margin-top: 90px; }

/* ==========================================================
   12. Presupuesto
   ========================================================== */
.quote-form {
  background: var(--form-bg) url("img/White-Background-Image.webp") center bottom / cover no-repeat;
}

.quote-form .title { font-size: clamp(26px, 3vw, 38px); margin-bottom: .3em; }

.price {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(30px, 3.4vw, 42px);
  color: var(--green);
  text-align: center;
  margin: 0 0 .4em;
}

.price-note {
  font-style: italic;
  text-align: center;
  color: var(--muted);
  max-width: 720px;
  margin: 0 auto;
}

.price-note b { color: var(--blue); text-decoration: underline; }

.arrow { width: 60px; margin: 24px auto; }

form { width: min(640px, 100%); margin-inline: auto; }

label { display: block; font-family: "Raleway", sans-serif; font-weight: 600; font-size: 16px; margin-bottom: 4px; }

input[type="text"], input[type="email"], textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 10px 14px;
  border: 1px solid #c9d3e0;
  border-radius: 4px;
  background: #fff;
  margin-bottom: 16px;
}

input:focus, textarea:focus { outline: 2px solid var(--orange-2); outline-offset: 1px; }

textarea { min-height: 130px; resize: vertical; }

.check { display: flex; gap: 8px; align-items: center; font-family: "Raleway", sans-serif; font-size: 15px; font-weight: 500; }

.legal { margin: 16px 0 24px; font-size: 13px; color: var(--muted); }

.legal summary { cursor: pointer; font-family: "Raleway", sans-serif; font-weight: 600; }

.legal p { margin-top: 10px; line-height: 1.5; }

form .btn { width: 100%; border: 0; cursor: pointer; }

form .btn:disabled { opacity: .6; cursor: wait; transform: none; }

.sesform-turnstile { margin: 0 0 16px; }

.sesform-status { margin-top: 16px; padding: 12px 16px; border-radius: 4px; font-family: "Raleway", sans-serif; font-size: 15px; font-weight: 600; }

.sesform-status:empty { display: none; }

.sesform-status--info { background: #eef3fb; color: var(--navy); }

.sesform-status--ok { background: #e9f6ec; color: #1f6b2c; }

.sesform-status--error { background: #fdecea; color: #a5281b; }

/* ---------- Pie ---------- */
.footer {
  background: linear-gradient(310deg, var(--blue) 0%, var(--navy) 100%);
  color: #fff;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  padding: 40px 0 30px;
}

.footer__logo img { width: 240px; margin: 0 auto 14px; }

.footer p { margin: 0; }

.footer p a { color: #fff; text-decoration: none; }

.footer p a:hover { color: var(--orange-2); }

/* ==========================================================
   PÁGINAS LEGALES
   ========================================================== */
.legal-header { padding: 24px 0; border-bottom: 1px solid #eef0f4; }

.legal-header img { width: 260px; }

.legal-page {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  padding: 50px 0 80px;
}

.legal-page h1 { font-size: clamp(30px, 3.4vw, 40px); font-weight: 500; color: var(--text); margin-bottom: .8em; }

.legal-page h3 { font-size: clamp(21px, 2.2vw, 28px); font-weight: 500; color: var(--text); margin: 1.6em 0 .5em; }

.legal-page ul { padding-left: 1.3em; margin: 0 0 1em; }

.legal-page li { margin-bottom: .4em; }

.legal-page a { word-break: break-word; }

.legal-date { color: var(--muted); font-style: italic; }

.table-wrap { overflow-x: auto; margin: 0 0 1.4em; }

.legal-page table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }

.legal-page th, .legal-page td { border: 1px solid #dfe4ec; padding: 10px 12px; text-align: left; vertical-align: top; }

.legal-page th { background: var(--form-bg); color: var(--navy); font-weight: 600; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1024px) {
  .works__grid, .features { grid-template-columns: repeat(2, 1fr); }

  /* Cabecera en tableta y móvil: foto arriba y texto debajo */
  .hero { min-height: 0; padding: 330px 0 50px; background-position: center, center top; background-size: cover, auto 380px; }
  .hero::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 230px, #fff 380px); }
  .hero .wrap { justify-content: center; }
}

@media (max-width: 767px) {
  body { font-size: 17px; }
  section { padding: 60px 0; }

  /* Móvil: sin foto, solo el texto */
  .hero { padding: 50px 0 45px; background: #fff; }
  .hero::before { display: none; }

  .benefits__grid, .split, .cards-2, .videos, .quotes, .steps, .works__grid, .features {
    grid-template-columns: 1fr;
  }

  .split .photo-col { order: -1; }
  .work { height: 280px; }
  .work:hover img { transform: translateY(calc(-100% + 280px)); }
  .btn { padding: 12px 20px; }
}