<header class="hero">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-secondary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-secondary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>

<header class="hero">
   <div class="content wave">
      <div class="d-flex flex-column">
         <nav aria-label="Navegación secundaria">
            <ol class="breadcrumb m-0">
               <li class="breadcrumb-item"><a href="#">Inicio</a></li>
            </ol>
         </nav>
         <div>
            <h1 class="mb-3">Encabezado de la página</h1>
            <p class="lead m-0">Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
            </p>
         </div>
				<div class="btn-hero">
					<button type="button" class="btn btn-secondary">
						Botón
					</button>
					<button type="button" class="btn btn-outline-secondary">
						Botón
					</button>
				</div>
      </div>
   </div>
   <div class="aside bg-aside-hero-dark"></div>
</header>

<header class="hero">
   <div class="content wave">
      <div class="d-flex flex-column">
         <nav aria-label="Navegación secundaria">
            <ol class="breadcrumb m-0">
               <li class="breadcrumb-item"><a href="#">Inicio</a></li>
            </ol>
         </nav>
         <div>
            <h1 class="mb-3">Encabezado de la página</h1>
            <p class="lead m-0">Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
            </p>
         </div>
				<div class="btn-hero">
					<button type="button" class="btn btn-secondary">
						Botón
					</button>
					<button type="button" class="btn btn-outline-secondary">
						Botón
					</button>
				</div>
      </div>
   </div>
   <div class="aside bg-aside-hero-dark"></div>
</header>

<header class="hero">
   <div class="content wave">
      <div class="d-flex flex-column">
         <nav aria-label="Navegación secundaria">
            <ol class="breadcrumb m-0">
               <li class="breadcrumb-item"><a href="#">Inicio</a></li>
            </ol>
         </nav>
         <div>
            <h1 class="mb-3">Encabezado de la página</h1>
            <p class="lead m-0">Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.</p>
         </div>
				<div class="btn-hero">
					<button type="button" class="btn btn-secondary">
						Botón
					</button>
					<button type="button" class="btn btn-outline-secondary">
						Botón
					</button>
				</div>
      </div>
   </div>
   <div class="aside">
      <video src="/Obelisco-V2/images/video_hero_header.mp4" autoplay="" muted="" loop="" controls="">
        Your browser does not support the video tag.
      </video>
   </div>
</header>

<header class="hero">
   <div class="content wave">
      <div class="d-flex flex-column">
         <nav aria-label="Navegación secundaria">
            <ol class="breadcrumb m-0">
               <li class="breadcrumb-item"><a href="#">Inicio</a></li>
            </ol>
         </nav>
         <div>
            <h1 class="mb-3">Encabezado de la página</h1>
            <p class="lead m-0">Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.</p>
         </div>
				<div class="btn-hero">
					<button type="button" class="btn btn-secondary">
						Botón
					</button>
					<button type="button" class="btn btn-outline-secondary">
						Botón
					</button>
				</div>
      </div>
   </div>
   <div class="aside">
      <video src="/Obelisco-V2/images/gif_hero_header.gif" autoplay="" muted="" loop="" controls="">
        Your browser does not support the video tag.
      </video>
   </div>
</header>

<header class="hero">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-secondary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-secondary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>

<header class="hero">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
			<div class="search-container">
				<div class="search-wrapper">
					<label htmlFor="search-home" class="sr-only">Buscar</label>
					<input 
						type="text" 
						id="search-home" 
						maxlength="100"
						autocomplete="off" 
						class="form-control" 
						placeholder="¿En qué te podemos ayudar?" 
						name="search-home" 
					/>
					<div class="search-btn-container">
						<button class="btn btn-lg btn-primary btn-search">
								Buscar
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
									<path d="M11.3137 10.0598H10.6553L10.422 9.83477C11.422 8.6681 11.9387 7.07643 11.6553 5.38477C11.2637 3.0681 9.33034 1.2181 6.99701 0.934766C3.47201 0.501433 0.505339 3.4681 0.938672 6.9931C1.22201 9.32643 3.07201 11.2598 5.38867 11.6514C7.08034 11.9348 8.67201 11.4181 9.83867 10.4181L10.0637 10.6514V11.3098L13.6053 14.8514C13.947 15.1931 14.5053 15.1931 14.847 14.8514C15.1887 14.5098 15.1887 13.9514 14.847 13.6098L11.3137 10.0598ZM6.31367 10.0598C4.23867 10.0598 2.56367 8.38477 2.56367 6.30977C2.56367 4.23477 4.23867 2.55977 6.31367 2.55977C8.38867 2.55977 10.0637 4.23477 10.0637 6.30977C10.0637 8.38477 8.38867 10.0598 6.31367 10.0598Z" fill="white">
									</path>
								</svg>
						</button>
					</div>
					<div class="search-results bg-light">
						<div>
								<a href="#" target="_blank" rel="noopener noreferrer" 
								class="list-link-result">
									<span class="material-symbols-rounded">search</span>
									Enlace predeterminado
								</a>
								<a href="#" target="_blank" rel="noopener noreferrer" 
								class="list-link-result">
									<span class="material-symbols-rounded">search</span>
									Enlace predeterminado
								</a>
							</div>
					</div>
				</div>
			</div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>

<header class="hero">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="d-flex flex-wrap column-gap-2 row-gap-4">
        <span class="me-3 fw-semibold">Texto de las etiquetas: </span>
        <span class="badge badge-default">Etiqueta</span>
        <span class="badge badge-default">Etiqueta</span>
        <span class="badge badge-default">Etiqueta</span>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>

<header class="hero">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="d-grid d-sm-flex flex-wrap column-gap-2 row-gap-4">
        <div class="dropdown">
          <button
            type="button"
            class="btn btn-dropdown btn-dropdown-border btn-lg"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            <span class="btn-dropdown-text ellipsis-1">Desplegable</span>
            <span class="material-symbols-rounded btn-dropdown-icon" aria-label="hidden">
              expand_more
            </span>
          </button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">
              <span class="item-text">Opción de navegación</span>
            </a>
            <a class="dropdown-item" href="#">
              <span class="item-text">Opción de navegación</span>
            </a>
            <a class="dropdown-item" href="#">
              <span class="item-text">Opción de navegación</span>
            </a>
          </div>
        </div>
        <div class="dropdown">
          <button
            type="button"
            class="btn btn-dropdown btn-dropdown-border btn-lg"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            <span class="btn-dropdown-text ellipsis-1">Desplegable</span>
            <span class="material-symbols-rounded btn-dropdown-icon" aria-label="hidden">
              expand_more
            </span>
          </button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">
              <span class="item-text">Opción de navegación</span>
            </a>
            <a class="dropdown-item" href="#">
              <span class="item-text">Opción de navegación</span>
            </a>
            <a class="dropdown-item" href="#">
              <span class="item-text">Opción de navegación</span>
            </a>
          </div>
        </div>
        <div class="dropdown">
          <button
            type="button"
            class="btn btn-dropdown btn-dropdown-border btn-lg"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            <span class="btn-dropdown-text ellipsis-1">Desplegable</span>
            <span class="material-symbols-rounded btn-dropdown-icon" aria-label="hidden">
              expand_more
            </span>
          </button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">
              <span class="item-text">Opción de navegación</span>
            </a>
            <a class="dropdown-item" href="#">
              <span class="item-text">Opción de navegación</span>
            </a>
            <a class="dropdown-item" href="#">
              <span class="item-text">Opción de navegación</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>

<!-- default -->
<header class="hero bg-content-hero-cyan">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-secondary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-secondary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>
<!-- sky -->
<header class="hero bg-content-hero-sky">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-secondary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-secondary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>
<!-- yellow -->
<header class="hero bg-content-hero-yellow">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-secondary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-secondary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>
<!-- purple -->
<header class="hero bg-content-hero-purple">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-secondary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-secondary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>
<!-- blue -->
<header class="hero bg-content-hero-blue">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-secondary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-secondary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>
<!-- red -->
<header class="hero bg-content-hero-red">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-secondary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-secondary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>

<header class="hero bg-content-hero-light">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-secondary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-secondary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-light"></div>
</header>

<header class="hero bg-content-hero-dark">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-light">
          Botón
        </button>
        <button type="button" class="btn btn-outline-light">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-light"></div>
</header>